@charset "utf-8";
/* CSS Document */
body {min-height: 100vh;display: flex;flex-direction: column;font-family: 'Microsoft JhengHei', 'Noto Sans TC', Arial, sans-serif;line-height: 1.5;letter-spacing: 0.5px;text-align: left;font-weight: normal;overflow-x: hidden;font-size: 16px;}
a {text-decoration: none;transition: all .1s ease-in-out;}
a:link {color: #232323;}
a:visited {color: #232323;}
a:active {color: #9C9C9C;}
h1,h3,h5,h6 {color: #070707;}
.wrapper {width: 1000px;position: relative;margin: 0 auto;clear: both;zoom:1;}
.wrapper:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both; height: 0;}
.container{width: 800px;position: relative;margin: 0 auto;clear: both;zoom:1;}
.container:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both; height: 0;}
@media screen and (max-width: 900px) {.wrapper, .container {width:95%;} }

.bg{background-image: url(../img/bg-top1.svg);background-repeat: no-repeat;background-position:85% top ;background-size: 24%;}
/*.bg:after{content: " ";width: 100%;height: 100%;position: fixed;bottom: 0px;background-image: url(../img/bg-top1.svg);background-repeat: no-repeat;background-position:85% top ;background-size: 24%;}*/
.bg::before{content: " ";width: 100%;height: 100%;position: fixed;bottom: 0px;z-index: -1;background-image: url(../img/bg-top2.svg);background-size: 25%;background-repeat: no-repeat;background-position: 15% bottom;}
@media screen and (max-width: 900px) {.bg{ background-position-y: 0%; background-position-x: right; background-size: 40%;}.bg:before{background-size: 50%; background-position-x: left; }}
@media screen and (max-width: 680px){.bg:before{display:none;}}
/*top nav*/
#header {background-image: url(../img/bg-top1.svg);background-repeat: no-repeat;background-size:50%;}
.top_box {width: 100%;position: relative;}
.top{ width:100%;height:50px; text-align:right; padding-right:10px; color: #ffffff; font-weight:bold; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#E84D6D+0,e59ac1+99 */
background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, #304AA5); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #304AA5); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,#304AA5); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E84D6D', endColorstr='#E84D6DE84D6D',GradientType=0 ); /* IE6-9 */
box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
}
.top img {width: 50px;height: 50px;float: right;}
/*漢堡*/
#toggle-nav {display: none;}
#toggle-nav:checked + .burger .burger_patty {background: #fff;}
#toggle-nav:checked + .burger .burger_patty:nth-child(1) {margin-top: 1rem;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}
#toggle-nav:checked + .burger .burger_patty:nth-child(2) {display: none;}
#toggle-nav:checked + .burger .burger_patty:nth-child(3) {margin-top: -.5rem;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}
#toggle-nav:checked ~ .main-nav {height: 100%;padding: 20px;background: #485FB5;opacity: 0.95; text-align: center;box-shadow: 0 6px 6px 3px rgba(50,50,50,.2);}
.burger {position: absolute;top: 10px;display: block;width: 40px;cursor: pointer; z-index: 3;}
.burger_patty {display: block;height: .2rem;background: #fff;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
.burger_patty + .burger_patty {margin-top: .5rem;}
.burger_patty, .main-nav, .main-nav_link {-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
.main-nav {width: 100%;height: 0;overflow: hidden;position: relative;z-index: 2;text-align: center;}
.main-nav_list { margin: 0;padding: 0;height: 100%;list-style: none;}
.main-nav_item {height: 25%;display: block;}
.main-nav_link {display: block;font-size: 1.5rem;padding: 1rem;}
.main-nav_list a{color: #fff;font-weight: bold;}
.main-nav_link:hover {color: #f8d4f7;}

/*麵包*/
#breadcrumb{margin: 70px 0px 10px 0px;}
#breadcrumb a{font-size: 14px;color: #777777;}
#breadcrumb a.active{color: #E84D6D;}
/*內文設定*/
#content {flex: 1 0 auto;}
.container h2{font-size: 26px;color: #E84D6D;font-weight: bold;margin-bottom: 20px;}
.container p {font-size: 16px;line-height: 1.6; text-align: justify;margin-bottom: 28px;}
.articlebox .end{margin-bottom: 50px;}
.flex-row {display: flex; flex-wrap: wrap; justify-content: space-between;}
.flex-row-end {display: flex;    width: 100%;}
.flex-row>.flex-col{width: 47.3333%;}
.flex-row>.flex-col-1{flex: 1;margin-left: 30px;}
.flex-col-2{width: 33.3333%;}
.flex-col-3{width: 30.3333%;}
.flex-col-3 p{font-weight: bold;}
.line{border: 0.5px #CBCBCB solid;margin: 20px 0px 50px 0px;}

/*最新消息*/
.pic{width: 100%;height:250px;overflow: hidden;text-align: center;background-position: center center;background-repeat: no-repeat;background-size: cover;}
.list-pic {width: 200px;height:150px;margin:15px 20px 15px 0px;float:left;overflow: hidden;text-align: center;background-position: center center;background-repeat: no-repeat;background-size: cover;}
#info-box .flex-row{  border-bottom: 1px solid #E84D6D;}
.flex-list{display: flex;box-pack: justify;height: auto;padding: 20px 0px;margin-bottom: 5em;}
.flex-container {display: flex;flex-wrap: wrap;}
.list-text{padding-left: 20px;width: 100%;display: block;}
.update span{font-size: 10px;display: inline-block;margin: 0 .5em 0 0;color: #E84D6D;}
.list-text p{margin-bottom: 0px;}
.flex-col h3{font-size: 20px;font-weight: bold;margin-bottom: 26px;}
.list-text h3{font-size: 20px;font-weight: bold; margin-bottom: 26px;}
.info-warp {border-bottom: 1px solid #E84D6D;}
@media screen and (max-width: 900px) {
  .pic{ width: 100%;height: 250px;overflow: hidden;}
  .flex-row>.flex-col-1{flex: auto;margin:0px;}
  .flex-col-3{width: 100%;}
  .flex-col-2{width: 30.3333%;}
  .list-pic {width: 33.333%;height: 100%;}
  .flex-col h3, .list-text h3{font-size: 16px;}
}
@media screen and (max-width: 680px) {.pic{ width: 100%;height: 200px;overflow: hidden;} .list-text p{display: none;} .flex-col-2{width: 35.3333%;}}
@media screen and (max-width: 480px) {.pic{ width: 100%;height: 125px;overflow: hidden;}.flex-col h3, .list-text h3{font-size: 14px;margin-bottom: 8px;}}

/* 公開資訊 */
.accordion-bral {min-height: 0;min-width: 220px;width: 100%;height: 100%;margin: 0px!important;}
.accordion-bral .ac-label {padding: 5px 20px;position: relative;display: block;height: auto;cursor: pointer;color: #E84D6D;line-height: 33px;font-size: 19px;background: #EFEFEF;border: 1px solid #CCC;}
.accordion-bral .ac-label:hover {background: #EFEFEF;}
.accordion-bral input + .ac-label  {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.accordion-bral input:checked + .ac-label,
.accordion-bral input:checked + .ac-label:active {background-color: #FBFBFB !important;color:#E84D6D;padding-left: 30px;padding-top: 10px;padding-bottom: 10px;border: 1px solid #E8E8E8;font-size: 20px;font-weight: bold;}
.accordion-bral input.ac-input {display: none;}
.accordion-bral .article {
  padding: 0 20px;
  background-color: white;
  border: 1px solid #E8E8E8;
  overflow: hidden;
  height: 0px;
  max-height: auto;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.accordion-bral .article p{color: #E84D6D;font-size: 18px;font-weight: bold;padding: 5px 0px;margin: 10px;}
.accordion-bral .article a{color: #727171;}
.accordion-bral .article p>a{font-weight: bold;border-bottom: 1px solid #727171;}
.accordion-bral .article p>a:hover{color: #222;}
.accordion-bral input:checked ~ .article i {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.accordion-bral input:checked ~ .article.ac-content {height: auto;}
.accordion-bral i {position: absolute;transform: translate(-30px, 0);margin-top: 10px;right: 0;}
.accordion-bral input:checked ~ .ac-label i:before {transform: translate(5px, 0) rotate(-45deg);}
.accordion-bral input:checked ~ .ac-label i:after {transform: translate(-5px, 0) rotate(45deg);}
.accordion-bral i:before, .accordion-bral i:after {content: "";position: absolute;background-color: #808080;width: 2.5px;height: 15px;border-radius: 50px;}
.accordion-bral i:before {transform: translate(-5px, 0) rotate(-45deg);}
.accordion-bral i:after {transform: translate(5px, 0) rotate(45deg);}

@media (max-width: 680px) {
    .accordion-bral .ac-label {padding: 5px 20px;position: relative;display: block;height: auto;padding-right: 40px;cursor: pointer;color: #777;line-height: 33px;font-size: 19px;background: #EFEFEF;border: 1px solid #CCC;}
    .accordion-bral i {position: absolute;transform: translate(-30px, 0);margin-top: 2%;right: 0;}
}
/* footer */
#footer {flex-shrink: 0;}
.footer{
font-size: 12px;
font-weight:bold; 
text-align: center;
color: #fff;
width:100%; padding:14px 0px;  
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7e4980+0,e59ac1+99 */
background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, #304AA5); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #304AA5); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,#304AA5); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E84D6D', endColorstr='#E84D6D',GradientType=0 ); /* IE6-9 */
/*margin-top: 5rem;*/
box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
}
.hidden{
  visibility: hidden;
  height: 250px;
  width: 100%;
}
/* ---- top ---- */
#go-top{  color: #fff;font-weight: bold;}
.go-top {
  background: none repeat scroll 0 0 padding-box #E84D6D;
  bottom: 20px;
  border: 1px solid #E84D6D;
  border-radius: 4px;
  display: none;
  font-size: 14px;
  padding: 10px;
  position: fixed;
  right: 5%;
  text-decoration: none;
  z-index: 999;
}

.go-top:hover,
.go-top:focus,
.go-top:active,
.go-top:visited {
  color: #fff;
  outline: 0;
  text-decoration: none;
}