@charset "utf-8";
/* CSS Document */
body .ap {
  position:relative;
  font-size:1em;
}
.modal {
  height:inherit;
}
/*面包屑導航*/
body .breadcrumb {
  background-color: transparent;
  margin: 0;
}
body .breadcrumb a {
  color:#000;
  margin: 0;
}
body .breadcrumb-item.active {
  color:#000;
}
@media screen and (max-width: 767px) {
	.container .accesskey,
		body.home .signinfo span,
		body .breadcrumb {
		display:none;
	}
	body.home .signinfo {
	  position:relative;
	  top: 0;
	  margin-bottom: 15px;
	}
}
/*聯絡資訊 1212*/
table{
	margin: 20px auto 40px auto;
	width: 90%;
    border-radius: 15px;
    overflow: hidden;
}
.ap >table tr th, .ap >table tr td{
	padding: 20px;
}
.ap >table tr th{
	background-color: #ffeff9;
	font-size: 110%;
	border-bottom: 2px solid #d672af;
}
.ap >table tr{
	background-color: #fff;
	}
.ap >table tr:nth-child(odd){
	background-color: #f6f6f6;
}
/*聯絡資訊 1212 END*/
/*操作步驟*/
body .step {
  position:relative;
  text-align:center;
  margin-bottom: 10px;
}
body .step::before {
  content:"";
  position:absolute;
  width:100%;
  height:5px;
  left:0;
  top:48%;
  background-color:#00c5d2;
}
body .step ul {
  list-style-type:none;
  padding:0;
  margin:0;
  position:relative;
}
body .step li {
  display:inline-block;
  background-color:#FFF;
  border:2px solid #00c5d2;
  padding:8px 10px;
  margin:0 4px;
  color:#00757c;
  border-radius:5px;
  font-size:95%;
}
/*主要抬頭*/
body .maintitle {
  position:relative;
  display:block;
  text-align:center;
  margin-bottom: 10px;
}
body .maintitle .title {
  font-size: 200%;
  color: #540236;
  display: inline-block;
  position:relative;
}
body .maintitle .txt {
  font-size:110%;
  padding:10px 0;
}
body .phonetitle {
  display:block;
  font-size: 130%;
  font-weight:bold;
  color:#0b8089;
  text-align:center;
  margin-bottom: 10px;
}
/*我的繳費*/
body .mypay {
  position: relative;
  padding: 10px 0;
}
body .mypay .stitle {
  position:relative;
  padding: 10px 10px 10px 40px;
  display:block;
  color:#FFF;
  border-radius: 50px;
  font-size:130%;
  font-weight: bold;
  margin-bottom:20px;
}
body .mypay .stitle.a {
  background-color:#00c5d2;
}
body .mypay .stitle.b {
  background-color:#c788c9;
}
body .mypay .stitle.c {
  background-color:#5e8abc;
}
body .mypay .stitle.d {
  background-color:#5ea9bc;
}
body .mypay .stitle::before {
  content:"";
  position:absolute;
  width: 30px;
  height:5px;
  left:0;
  top: 48%;
  background-color:#fdd100;
}
body .mypay .box {
  position:relative;
  padding:15px;
  background-color:#FFF;
  border-radius:10px;
  box-shadow:0 0 15px #ccc;
  margin-bottom:20px;
}
body .mypay .box .total {
  position:relative;
  display: block;
  /* padding: 15px 0; */
  margin-bottom: 15px;
}
body .mypay .box .total span {
  color:#f00;
  display:inline-block;
  font-size:110%;
  font-weight:bold;
}

body .mypay .box .more {
  position:relative;
  display:block;
  text-align:center;
  padding: 15px 0;
}
body .mypay .box .more a {
  background-color:#00a2ab;
  color:#FFF;
  padding:8px 25px;
  border-radius:5px;
  display:inline-block;
  width:150px;
}
body .mypay .box .more a:hover {
  text-decoration:none;
  background-color:#00757c;
}
body .mypay .box .morephone {
  position:relative;
  display:block;
  text-align:center;
  margin-bottom:15px;
}
body .mypay .box .morephone a {
  background-color:#00a2ab;
  color:#FFF;
  padding:8px 25px;
  border-radius:5px;
  display:block;
}
body .mypay .box .morephone a:hover {
  text-decoration:none;
  background-color:#00757c;
}
body .mypay .box p {
  margin:0;
}
body .mypay .box .other {
  position:relative;
  display:flex;
  justify-content: flex-start;
  align-items:center;
}
body .mypay .box .other .icon {
  padding: 0 20px;
}
body .mypay .box .other .subtt {
  font-size:120%;
  color: #790236;
  font-weight:bold;
}
@media screen and (max-width: 395px) {
	body .step li {
	  padding:8px 5px;
	  margin:0 2px;
	}
}
@media screen and (max-width: 364px) {
	body .step li {
	  display:block;
	  border:none;
	  padding:4px;
	  margin-bottom:4px;
	}
	body .step::before {
	  display:none;
	}
	}
	@media screen and (min-width: 768px) {
	body .step {
	  display:none;
	}
	body .mypay .box .morephone {
	  display:none;
	}
	}
	@media screen and (max-width: 767px) {
	body .maintitle {
	  margin-bottom:15px;
	}
	body .maintitle .title {
	  font-size:130%;
	  font-weight:bold;
	}
	body .maintitle .title::after {
	  display:none;
	}
	body .maintitle .txt {
	  display:none;
	}
	body .mypay .stitle {
	  font-size: 115%;
	}
	body .mypay .box.a {
	  background-image: none;
	}
	body .mypay .box.a .more {
	  display:none;
	}
	body .mypay .box .other {
	  display:block;
	}
	body .mypay .box .other .icon {
	  text-align:center;
	}
}
/*表格*/
.home .rwd-table {
  min-width: 100%;
  position:relative;
  margin-bottom: 20px;
}
.home .rwd-table th,
.home .rwd-table td:before {
  color: #000000;
  font-weight: bold;
  background-color: #d672af;
}
.home .rwd-table tr:nth-of-type(2n+1) {
  background: hsl(0deg 0% 100%);
}
.home .rwd-table tr {
  border-bottom:1px solid #ccc;
  position: relative;
}
.home .rwd-table tr:last-child {
  /*border-bottom:none;*/
}
@media screen and (max-width: 767px) {
	.home .rwd-table {
	  background: hsl(0, 0%, 91%);
	  overflow: hidden;
	} 
	.home .rwd-table th {
	  display: none;
	} 
	.home .rwd-table td:before {
	  content: attr(data-th) " : ";
	  font-weight: bold;
	  margin-right: 5px;
	  display: inline-block;
	}  
	.home .rwd-table td:before {
	  background-color: transparent;
	}
	.home .rwd-table td.inline-block:before {
	  display: inline-block;
	}
	.home .rwd-table td {
	  text-align: left !important;
	  border-bottom: 1px #dadada solid;
	  padding: 10px;
	  display: block;
	}
	.home .rwd-table td:first-child {
	  background-color:#fdd100;
	}
	.home .custom-control {
	  display:inline-block;
	}
	.home .rwd-table {
	  margin-bottom: 0;
	}
}
@media screen and (min-width: 768px) {
	.home .rwd-table td:before {
	  display: none;
	}
	.home .rwd-table th,
	.home .rwd-table td {
	  display: table-cell;
	  padding: 0.25em 0.5em;
	  text-align: center;
	  word-break: break-all;
	}
	.home .rwd-table th:first-child,
	.home .rwd-table td:first-child {
	  padding-left: 0;
	}
	.home .rwd-table th:last-child,
	.home .rwd-table td:last-child {
	  padding-right: 0;
	}
	.home .rwd-table th,
	.home .rwd-table td {
	  padding: 0.8em !important;
	}
	.home .rwd-table th:nth-child(1)::before {
	  display: none;
	}
	.home .rwd-table th {
	  position: relative;
	  word-break: keep-all;
	}
}
/*表格end*/
/*行動支付*/
	body .paylist {
	  position:relative;
	  text-align:center;
	}
	body .paylist img {
	  width:100%;
	}
	body .paylist ul {
	  list-style-type:none;
	  padding:0;
	  text-align: center;
	}
	body .paylist li {
	  display:inline-block;
	  padding:5px 10px;
	}
	body .paylist li a {
	  display:inline-block;
	  border-radius:5px;
	  overflow:hidden;
	  box-shadow:0 0 10px #ccc;
	  transition: all 200ms ease-out;
	}
	body .paylist li a:hover {
	  text-decoration:none;
	  -moz-transform: scale(0.95);
	  -webkit-transform: scale(0.95);
	  -o-transform: scale(0.95);
	  -ms-transform: scale(0.95);
	  transform: scale(0.95);
	}
	body .payim {
	  padding:10px 10px 0 10px;
	  border-top:1px solid #dddddd;
	}
	body .payim .imtitle {
	  font-weight:bold;
	  font-size:100%;
	  margin-bottom:5px;
	}
	body .payim ul {
	  list-style-type:none;
	  padding-left:20px;
	  font-size:95%;
	}
	body .payim li {
	  list-style-type:decimal;
	}
@media (max-width:576px) {
	body .paylist li {
	  width:49%;
	}
}
/*繳費查詢*/
	.tabs {
	  position:relative;
	  padding-top: 15px;
	}
	.tabs .nav-tabs  {
	  border-bottom:2px solid #00a5ac;
	}
	.tabs .nav-tabs li {
		text-align: center;
		white-space: nowrap;
		list-style-type: none;
		margin-bottom: 0;
	}
	.tabs .nav-tabs li a {
		background-color: #efefef;
		color: #000;
		padding: 10px 25px;
		font-size: 105%;
		border: none;
		margin:0 4px;
	}
	.tabs .nav-tabs .nav-item.show .nav-link,
	.tabs .nav-tabs .nav-link.active {
		background-color: #00a5ac;
		color: #fff;
	}
	body.home .search_group {
	  padding: 15px;
	  background-color: #FFF;
	}
	body.home .search_group .col-12 {
	  padding: 0;
	}
	body.home .search_group .form-flex {
	  padding: 4px !important;
	  display: -webkit-flex;
	  display: flex;
	}
	body.home .search_group .row {
	  margin: 0;
	}
	body.home .search_group .form_title {
	  white-space: nowrap;
	  padding-top: 10px !important;
	}
	body.home .search_group .day {
	  display: inherit;
	}
	body.home .search_group .btn {
	  margin: 4px;
	  background-color: #540236;
	  padding: 7px 25px;
	  border: none;
	  color: #fff;
	  width: 100%;
	  white-space: nowrap;
	  border-radius: 50px;
	}
	body.home .search_group .center-flex .btn {
	  -webkit-box-flex: auto;
	  -ms-flex: auto;
	  flex: auto;
	  width: auto;
	}
	body.home .search_group .btn:hover {
	  background-color: #00a5ac;
	  color: #fff;
	}
	body .imnote {
	  padding:15px;
	  position:relative;
	  display:block;
	  border-top: 2px solid #efefef;
	}
	body .imnote .title {
	  font-size:110%;
	  font-weight:bold;
	  margin-bottom:5px;;
	}
	body .imnote ul {
	  padding-left:25px;
	  font-size: 1em;
	}
	body .imnote li {
	  list-style-type: decimal;
	  padding: 2px 0;
	}
	body .search_list {
	  position:relative;
	  margin-bottom: 15px;
	  display: block;
	}
	body .search_list .title {
	  font-size:120%;
	  font-weight:bold;
	  padding:10px 0;
	  display:block;
	  text-align:center;
	}
	body .search_list .more {
	  position:relative;
	  display:block;
	  text-align:center;
	}
	body .search_list .more a {
	  background-color: #540236;
	  color:#FFF;
	  padding:8px 25px;
	  border-radius:5px;
	  display:inline-block;
	  width:150px;
	}
	body .search_list .more a:hover {
	  text-decoration:none;
	  background-color:#00757c;
	}
	body .warn {
	  font-size:90%;
	  color:#cd7256;
	}
	body .warn.date {
	  padding-left:112px;
	}
@media (max-width:767px) {
	body .search_list .more {
	  padding:10px 0;
	}
	.tabs .nav-tabs li {
	  width:50%;
	}
	body .warn.date {
	  padding-left:5px;
	}
}
@media (max-width:480px) {
	body.home .search_group .form-flex {
	  display: block;
	}
	body.home .search_group .form_title.a {
	  display:none;
	}
	body.home .search_group .form_title {
	  padding-top: 0px !important;
	}
	.tabs {
	  padding-top:0;
	}
}
/*常見問答*/
	.list.collapse {
		font-size: 1em;
		border-radius: 10px;
		overflow: hidden;
		margin: 30px 15px;
	}
	.collapse.list .accordion>.card {
		border: none;
	}
	.collapse.list .accordion>.card:nth-child(1) .btn-link {
		border: none;
	}
	.collapse.list .accordion>.card>.card-header {
		padding: 0;
	}
	.collapse.list .card-body {
		background-color: #f3f3f3;
		border-left: 1px solid #8e3f65;
		border-right: 1px solid #8e3f65;
	}
	.collapse.list .btn-link {
		padding: 15px 40px 15px 15px;
		display: block;
		width: 100%;
		text-align: left;
		color: #fff;
		background-color: #8e3f65;
		text-decoration: none;
		border-radius: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.39);
		position: relative;
		font-weight: bold;
	}
	.collapse.list .btn-link.b {
	  background-color: #56a5c9;
	}
	.collapse.list .btn-link::after {
	  content:"";
	  border-top: 0;
	  border-right: .3em solid transparent;
	  border-bottom: .3em solid #ffffff;
	  border-left: .3em solid transparent;
	  width: 0;
	  height: 0;
	  display: inline-block;
	  vertical-align: .255em;
	  position: absolute;
	  right: 15px;
	  margin-top: 9px;
	  top: 30%;
	}
	.collapse.list .btn-link.collapsed::after {
	  content:"";
	  border-top: .3em solid #ffffff;
	  border-right: .3em solid transparent;
	  border-bottom: 0;
	  border-left: .3em solid transparent;
	  width: 0;
	  height: 0;
	  display: inline-block;
	  vertical-align: .255em;
	  position: absolute;
	  right: 15px;
	  margin-top: 9px;
	}
	/*分頁-按鈕*/
	.ap .button {
	  text-align: center;
	  /* width: 100%; */
	  padding: 30px 0;
	  display:block;
	  position: relative;
	}
	.ap .button ul {
	  list-style-type: none;
	  text-align: center;
	  display: -webkit-flex;
	  display: flex;
	  -webkit-flex-wrap: wrap;
	  flex-wrap: wrap;
	  -webkit-justify-content: center;
	  justify-content: center;
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-align-content: center;
	  align-content: center;
	  padding: 0;
	}
	.ap .button li a   {
	  color: #000;
	  padding: 8px 15px;
	}
	.ap .button li.active a   {
	  background-color: #540236;
	  border-color: #540236;
	}
	.ap .button li.back a   {
	  color: #FFF;
	  padding: 8px 15px;
	  display:inline-block;
	  background-color: #540250;
	  border-radius: 5px;
	}
	.ap .button li.back a:hover {
	  text-decoration:none;
	  background-color:#00757c;
	}
	/*單頁內容*/
	body.home .ap .detail {
	  position:relative;
	  padding:15px;
	  background-color:#FFF;
	  border-radius:8px;
	}
	body.home .ap .detail .info {
	  display:flex;
	  font-size: 95%;
	}
	body.home .ap .detail p {
	  margin-bottom:5px;
	}
	body.home .ap .detail .info .date {
	  display:inline-flex;
	  margin-right:10px;
	}
	body.home .ap .detail .info .sort {
	  background-color:#fcd100;
	  color:#000;
	  border-radius:50px;
	  padding:2px 10px;
	  display:inline-flex;
	}
	body.home .ap .detail .subject {
	  font-size:130%;
	  font-weight:600;
	  padding:5px 0;
	  color: #540236;
	  border-bottom: 1px solid;
	}
	body.home .ap .detail .edit {
	  padding: 20px 0;
	  line-height:28px;
	}
	body.home .ap .detail .edit img {
	  width:100%;
	}
	body.home .ap .detail .stt {
	  padding:  5px 10px 5px 25px;
	  color:  #000;
	  font-weight:600;
	  margin:  0;
	  font-size:120%;
	  position:relative;
	  background-color:#e8e8e8;
	}
	body.home .ap .detail .stt::after {
	  position: absolute;
	  top: 50%;
	  left:0;
	  transform: translateY(-50%);
	  content: '';
	  width: 12px;
	  height: 4px;
	  background-color: #d672af;
	}
	body.home .ap .detail .download {
	  position:relative;
	}
	body.home .ap .detail .download ul {
	  padding:0;
	}
	body.home .ap .detail .download li {
	  border-top: 1px #cecece dashed;
	  padding: 10px;
	  margin:0;
	  position: relative;
	  display:block;
	}
	body.home .ap .detail .download li:before {
	  content: "❯";
	  margin-right:5px;
	}
	body.home .ap .detail .download li li:before {
	  content: "";
	}
	body.home .ap .detail .download .icon li a:hover {
	  opacity: 0.7;
	}
	body.home .ap .detail .download .icon li, 
	body.home .ap .detail .download li:nth-child(1) {
	  border: none;
	}
	body.home .ap .detail .download .icon li {
	  float: left;
	  margin-left: 5px;
	  padding: 0;
	}
	body.home .ap .detail .download .icon {
	  position: relative;
	  bottom: -5px;
	  display: inline-block;
	}
	body.home .ap .detail .download .icon li::before {
	  display: none;
	}
	/*靜態頁面編輯*/
	body.home .ap .editbox {
	  position:relative;
	  padding:25px;
	  display:block;
	  background-color:#FFF;
	  border-radius:8px;
	  box-shadow: 0 0 12px hsla(0, 0%, 0%, 0.30);
	  margin-bottom:30px;
	}
	body.home .ap .editbox .mtt {
	  font-size:120%;
	  font-weight:600;
	  margin: 10px 0;
	  color: #540236;
	}
	body.home .ap .editbox .stt {
	  font-size:110%;
	  font-weight:600;
	  margin-bottom:10px;
	}
	body.home .ap .editbox p {
	  margin-bottom:10px;
	}
	body.home .ap .editbox ul {
	  padding: 0 0 0 20px;
	}
	body.home .ap .editbox li {
	  padding:2px;
	  list-style-type: decimal;
	}
	/*20211018水號電號查繳*/
	body .search_list.a .title {
	  text-align:left;
	  padding: 15px 0;
	}
	body .tab-content {
	  position:relative;
	}
	.ap .setbtn {
	  position:absolute;
	  padding: 10px 0;
	  display: block;
	  right:0;
	  z-index:1;
	}
	.ap .setbtn a {
	  background-color: #540236;
	  display:block;
	  border-radius:5px;
	  color:#FFF;
	  padding: 7px 10px 7px 32px;
	  text-decoration:none;
	  background-image: url(../images/home/add.png);
	  background-repeat:no-repeat;
	  background-position:10px center;
	}
	.ap .setbtn a:hover {
	  background-color:#c74372;
	  color:#FFF;
	}
	body .tab-pane .col-md-2,
	body .tab-pane .col-md-8,
	body .tab-pane .col-12 {
	  margin: 0;
	  padding: 10px 5px !important;
	}
	body .tab-pane span {
	  color:#f00;
	}
@media (max-width:768px) {
	.ap .setbtn {
	  position:inherit;
	  padding:0;
	  display:flex;
	  justify-content:flex-end;
	}
	.ap .setbtn a {
	  display:inline-block;
	}
}
@media (max-width:480px) {
	.ap .setbtn {
	  padding-bottom:15px;
	}
}
/*網站導覽*/
	.ap .sitemap {
	  margin-bottom: 50px;
	  display:block;
	  position:relative;
	  padding: 0 5px 5px 5px;
	}
	.ap .sitemap .sitemap_note {
	  padding: 13px;
	  line-height: 160%;
	  letter-spacing: 2px;
	}
	.ap .sitemap ul {
	  padding: 0 5px;
	  margin: 10px 0;
	  list-style-type: none;
	}
	.ap .sitemap li {
	  display:inline-block;
	  padding:10px;
	}
	.ap .sitemap li a {
	  display:block;
	  background-color: #540236;
	  color:#fff;
	  padding:8px 15px;
	  border-radius:5px;
	}
	.ap .sitemap li a:hover {
	  text-decoration:none;
	  background-color:#007980;
	}