@charset "utf-8";
/* CSS Document */
body.home .main {
  margin: 0;
}
.ap {
  position: relative;
  padding: 0px 0 50px 0;
}
.maintitle {
  font-size: 150%;
  font-weight: bold;
  padding: 10px 0;
}
.bt_eye {
  position:absolute;
  right:10px;
  top:5px;
}
.bt_eye img {
  width:22px;
  margin-right:5px;
}
.bt_eye a {
  display:flex;
  align-items:center;
  padding: 5px 0;
  font-size:initial;
}
.bt_eye a:hover {
  opacity:.8;
}
.ap .subtitle_m {
  display: block;
  padding: 10px;
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 15px;
  position: relative;
  background-color: #00a9e4;
  color:#FFF;
  border-radius:5px;
}
.ap .subtitle {
  display: block;
  padding: 10px 10px 10px 25px;
  font-size: 120%;
  font-weight: 600;
  margin-bottom: 15px;
  position: relative;
  background-color: #eee;
}
.ap .subtitle::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 3px;
  display: block;
  background-color: #00a9e4;
  top: 50%;
  left: 10px;
  transform: translate(-50%, -50%);
}
/*checkbox and radio*/
input[type=checkbox], input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 20px;
  vertical-align: -0.8rem;
  transition: all .15s ease-out 0s;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin: .4rem;
  outline: none;
  border-radius: 10%;
}
input[type=checkbox]:focus, input[type=radio]:focus {
  background-color: #2175C3 !important;
}
/* Checkbox */
input[type=checkbox]:before, input[type=checkbox]:after {
  position: absolute;
  content: "";
  background: #fff;
  transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
  left: 2px;
  top: 6px;
  width: 0;
  height: 2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
  right: 9px;
  bottom: 3px;
  width: 2px;
  height: 0;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transition-delay: .2s;
}
input[type=checkbox]:checked:before {
  left: 0px;
  top: 9px;
  width: 9px;
  height: 3px;
}
input[type=checkbox]:checked:after {
  right: 4px;
  bottom: 1px;
  width: 3px;
  height: 14px;
}
input[type=checkbox]:indeterminate:before, input[type=checkbox]:indeterminate:after {
  width: 7px;
  height: 2px;
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
  left: 1px;
  top: 7px;
}
input[type=checkbox]:indeterminate:after {
  right: 1px;
  bottom: 7px;
}
/* Radio */
input[type=radio] {
  border-radius: 50%;
}
input[type=radio]:checked:before {
  transform: scale(1);
}
input[type=radio]:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 3px;
  transform: scale(0);
  transition: all ease-out 250ms;
  background: #fff;
  z-index: 1;
  position: absolute;
}
input[type=radio]:checked:after {
  transform: scale(1);
}
input[type=radio]:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 4px;
  transform: scale(0);
  transition: all ease-out 250ms;
  background: #2175C3;
  top: -6px;
  left: -6px;
  position: absolute;
}
/* Colors */
input[type=checkbox], input[type=radio] {
  border: 2px solid #ccc;
  background-color: #FFF;
}
input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
  background: #2175C3;
  border: 2px solid #2175C3;
}
/*面包屑導航*/
body .breadcrumb {
  background-color: transparent;
  margin: 0;
  padding: 10px 15px;
}
body .breadcrumb a {
  color: #2175c3;
  margin: 0;
}
/*登入/註冊*/
.loginform {
  max-width: 340px;
  margin: 0 auto;
  padding: 40px 0;
}
.loginform label {
  display: none;
}
.loginform input, .form-group .input-group-text {
  background-color: #E8F0F3;
  border: none;
  height: 44px;
  padding: 10px;
}
.form-group .input-group-text a {
  padding: 6px;
}
.form-group .input-group-text a:hover {
  opacity: 0.6;
}
.loginform .content_t {
  text-align: center;
  margin-bottom: 40px;
}
.loginform .link {
  display: block;
  text-align: right;
}
.loginform .link a {
  padding: 5px;
  color: #333;
}
.loginform .link a:hover {
  color: #2175C3;
  text-decoration: none;
}
.loginform .bt-send {
  margin-top: 20px;
}
.loginform .bt-send input {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: #2175C3;
  color: #FFF;
  border-radius: 5px;
  font-weight: bold;
  width:100%;
}
.loginform .bt-send input:hover {
  text-decoration: none;
  background-color: #004687;
}
.loginform .sharelogin {
  margin-top: 10px;
}
.loginform .sharelogin li {
  padding: 5px 0;
  width: 100%;
}
.loginform .sharelogin li a {
  border: 1px solid #dadce0;
  color: #333;
  padding: 10px;
  width: 100%;
  display: flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.loginform .sharelogin li a:hover {
  text-decoration: none;
  background-color: #feebba;
}
.loginform .sharelogin li img {
  margin-right: 4px;
}
.loginform .sharelogin p {
  padding: 5px;
  color: #2175c3;
  text-align: center;
}
.loginform .regtxt {
  text-align: center;
  margin-top: 20px;
  font-size: 105%;
}
.loginform .regtxt a {
  font-weight: bold;
}
@media screen and (max-width: 991px) {
.loginform .content_t {
  margin-bottom: 20px;
}
.loginform .content_t img {
  display: none;
}
}
/*20240809*/
.loginform .radiobox label {
  display:block;
  margin: 0;
  padding: 0;
}
.loginform .radiobox input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 20px;
  vertical-align: -0.8rem;
  transition: all .15s ease-out 0s;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin: .4rem;
  outline: none;
}
.loginform .radiobox input[type=radio]:focus {
  background-color: #2175C3 !important;
}
.loginform .radiobox input[type=radio]:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  /* border-radius: 50%; */
  margin: 3px;
  /*transform: scale(0);*/
  transition: all ease-out 250ms;
  background: #fff;
  z-index: 1;
  position: absolute;
  top: 2px;
  left: 2px;
}
.loginform .radiobox input[type=radio]:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 4px;
  /*transform: scale(0);*/
  transition: all ease-out 250ms;
  background: #2175C3;
  top: -4px;
  left: -4px;
  position: absolute;
}
/*會員方案*/
.level {
  position: relative;
  margin: 20px 0 50px 0;
}
.level ul {
  display: flex;
  flex-wrap: wrap;
}
.level li {
  width: 25%;
  padding: 10px;
  display: flex;
}
.level .box {
  position: relative;
  padding: 0 0 60px 0;
  border: 2px solid #E8F0F3;
  border-radius: 5px;
  width: 100%;
}
.level .stt {
  display: flex;
  background-color: #E8F0F3;
  padding: 10px;
  white-space: nowrap;
  font-size: 95%;
  width: 100%;
}
.level .stt img {
  width: 15px;
}
.level .stt .t01 {
  font-size: 110%;
  font-weight: bold;
  margin: 0 5px;
}
.level .info {
  padding: 10px;
}
.level .bt {
  position: absolute;
  bottom: 0;
  padding: 10px;
  width: 100%;
}
.level .bt a {
  background-color: #2175c3;
  display: block;
  text-align: center;
  padding: 8px 10px;
  border-radius: 5px;
  color: #FFF;
}
.level .bt a:hover {
  background-color: #004687;
}
.level .bt p {
  position: relative;
  padding: 0 20px;
  display: inline-block;
}
.level .bt p:after {
  content: "";
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  -webkit-transform: rotate(45deg);
  border-left: solid 0px transparent;
  border-bottom: solid 0px transparent;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  top: 39%;
  right: 0;
  position: absolute;
  transition: all 200ms ease-out;
}
.level .bt a:hover p:after {
  right: -10px;
}
@media screen and (max-width: 991px) {
.level li {
  width: 50%;
}
}
@media screen and (max-width: 540px) {
.level li {
  width: 100%;
}
}
/*會員註冊表單*/
.reg_form {
  padding: 10px;
  margin-bottom: 50px;
}
.reg_form .title {
  font-weight:bold;
  font-size:110%;
  margin-bottom:8px;
}
.reg_form .title span {
  color: #e40000;
  margin-left: 5px;
}
.reg_form .im {
  margin-bottom: 20px;
}
.reg_form .im span {
  color: #e40000;
  font-weight: blod;
  padding: 0 4px;
}
.reg_form .form-group.no label {
  display: none;
}
.reg_form .form-group label, .reg_form .checkbox label {
  font-weight: bold;
  font-size: 110%;
}
.reg_form .checkbox label {
  line-height: 180%;
  margin: 0;
}
.reg_form .form-group label span {
  color: #e40000;
  font-weight: blod;
  margin-left: 5px;
}
.reg_form .form-group input,
.reg_form .form-group select,
.reg_form .form-inline input,
.reg_form .form-inline select {
  background-color: #E8F0F3;
  border: none;
  height: 44px;
}
.reg_form .form-group .form-control-file {
  background-color:transparent !important;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef !important;
}
.reg_form .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #678db1;
}
.reg_form .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #678db1;
}
.reg_form .form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: #678db1;
}
.reg_form .custom-select {
  color: #678db1;
}
.reg_form .input-group .btn {
  background-color: #2175C3;
  color: #FFF;
}
.reg_form .input-group .btn:hover {
  background-color: #004687;
}
.reg_form .form-group small {
  font-size: 95%;
}
.reg_form ul li {
  list-style-type: decimal;
}
.reg_form ul {
  padding-left: 40px;
}
.reg_form .form-group .btn {
  display: block;
  width: 100%;
  background-color: #2175C3;
  color: #FFF;
  padding: 9px;
}
.reg_form .form-group .btn:hover {
  background-color: #004687;
}
.reg_form .radiobox {
  margin-bottom:10px;
}
.reg_form .form-tt {
  font-size: 110%;
  font-weight:bold;
  margin-bottom: 8px;
}
.reg_form .form-tt span {
  color:#e40000;
  margin-left: 5px;
}
.reg_form .radiobox label {
  margin:0 !important;
}
.reg_form .form-group.bt-flex {
  display:inline-flex;
  width: 50%;
}
.reg_form .vbt {
  margin-left:10px;
}
.reg_form .vbt a {
  display:inline-block;
  text-align:center;
  padding:10px 10px;
  color:#FFF;
  border-radius:3px;
  white-space:nowrap;
}
.reg_form .vbt a:hover {
  text-decoration:none;
  background-color:#607D8B;
}
.reg_form .vbt .c01 {
  background-color:#2175C3;
}
.reg_form .vbt .c02 {
  background-color:#4CAF50;
}
.reg_form .form-inline label {
  display:none;
}
@media screen and (min-width: 991px) {
.reg_form .form-group,
.reg_form .form-inline {
  width:50%;
}
}
@media screen and (max-width: 991px) {
.reg_form .form-group.bt-flex {
  width: 100%;
}
}
@media screen and (max-width: 480px) {
.reg_form .form-group.bt-flex {
  display: block;
}
.reg_form .vbt {
  margin:10px 0;
}
.reg_form .vbt a {
  display:block;
}
}
/*好康優惠*/
.discount_list {
  position: relative;
  margin: 15px 0 30px 0;
}
.discount_list ul {
  padding: 0;
  margin: 0;
}
.discount_list li {
  padding: 15px !important;
  position: relative;
}
.discount_list li .box {
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  width: 100%;
  border: 2px solid #E8F0F3;
  overflow: hidden;
}
.discount_list .pic {
  width: 100%;
  background-color: #f3f3f3;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  padding-top: 50%;
  border-bottom: 2px solid #E8F0F3;
}
.discount_list .pic img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.discount_list .info {
  padding: 10px 14px;
}
.discount_list .info p {
  margin: 4px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}
.discount_list .info .date {
  color: #2175C3;
}
.discount_list .info .title {
  font-size: 110%;
  font-weight: bold;
  color: #000;
}
.discount_list .inbtn {
  position: relative;
  display: flex;
  padding: 0 10px 10px 10px;
}
.discount_list .inbtn a {
  background-color: #2175C3;
  width: 100%;
  padding: 8px;
  margin: 5px;
  text-align: center;
  color: #FFF;
  border-radius: 5px;
}
.discount_list .inbtn a.url {
  background-color: #FFF;
  color: #2175C3;
  border: 1px solid #2175C3;
}
.discount_list .inbtn a:hover.url {
  background-color: #2175C3;
  color: #FFF;
}
.discount_list .inbtn a:hover {
  text-decoration: none;
  background-color: #004382;
}
/*內頁搜尋*/
.home_search {
  position: relative;
  background-color: #E8F0F3;
  border-radius: 5px;
  padding: 15px;
}
.home_search label {
  margin: 0;
}
.home_search .zone {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  z-index: 3;
  padding: 0 15px;
}
.home_search .zone .bt {
  display:flex;
  justify-content:center;
}
.home_search .zone .bt a {
  background-color: #2175c3;
  padding: 6px 15px;
  border-radius: 5px;
  color: #FFF;
  margin:4px;
}
.home_search .zone .bt a:hover {
  text-decoration:none;
  background-color: #004382;
}
.home_search .btns {
  position: relative;
}
.home_search .btns:hover {
  text-decoration: none;
  background-color: #bad6e0;
}
.home_search .btns p {
  display: none;
}
.home_search .btns {
  position: relative;
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 5px;
  background-color: #FFF;
}
.home_search .btns.collapsed:before {
  content: "";
  position: absolute;
  top: 13px;
  left: 14px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  border-left: none;
  border-bottom: none;
  transform: rotate(135deg);
}
.home_search .btns:before {
  content: "";
  position: absolute;
  top: 17px;
  left: 14px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-top: none;
  border-right: none;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(135deg);
}
.home_search .card-body {
  margin-top: 5px;
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  padding:15px;
}
.zone_group {
  position: relative;
  width: 100%;
}
.zone_group ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.zone_group li {
  width: 90px;
  padding: 2px;
}
.zone_group .tt {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.zone_group .tt p {
  font-size: 120%;
  font-weight: bold;
}
.zone_group .tt a {
  background-color: #2175c3;
  padding: 6px 15px;
  border-radius: 5px;
  color: #FFF;
}
.zone_group .tt a:hover {
  text-decoration: none;
  background-color: #004382;
}
.home_search .form-flex {
  padding: 50px 10px 0 10px !important;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.home_search .form-flex .form_title {
  white-space:nowrap;
}
.home_search .form-inline {
  width: 50%;
  display: flex;
  position: relative;
  z-index: 1;
  margin-left: 130px;
}
.home_search .form-inline input {
  border: none;
  height: 40px;
}
.home_search .form-group {
  /* position: absolute; */
  right: 0;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px 90px 0px 140px;
  margin: 0;
  z-index: 1;
}
.home_search .form-group.en {
  padding: 0px 90px 0px 240px;
}
.home_search .form-group input {
  border: none;
  height: 40px;
}
.home_search .bt_search {
  position: absolute;
  right: 15px;
  top: 16px;
  z-index: 3;
}
.home_search .bt_search button {
  width: 60px;
  background-color: #2175c3;
  color: #fff;
  padding: 7px;
  border-radius: 5px;
  margin-left: 8px;
  text-align: center;
  display: block;
}
.home_search .bt_search button:hover {
  text-decoration: none;
  background-color: #004382;
}
@media screen and (max-width: 991px) {
.home_search .zone {
  z-index: 2;
}
.home_search .form-inline {
  margin-left: 130px;
  width: 100%;
  margin-bottom: 15px;
  z-index: 2;
}
.home_search .form-group {
  position: relative;
  padding: 0px 90px 0 140px;
}
.home_search .form-flex {
  padding: 5px 10px 0 10px !important;
}
}
@media screen and (max-width: 575px) {
.home_search .form-inline {
  margin-left: 0px;
  margin-top: 55px;
  flex-wrap: nowrap;
  z-index: 1;
}
}
@media screen and (max-width: 500px) {
.home_search .bt_search {
  position: relative;
  right: initial;
  top: initial;
  justify-content:center;
  width:100%;
  margin-top:15px;
  z-index:1;
}
.home_search .bt_search button {
  margin: auto;
}
.home_search .form-group {
  position: relative;
  padding: 0px 15px 0 140px;
}
}
/*分頁按鈕*/
.ap .button {
  text-align: center;
  padding:20px 10px;
  border-top: 1px solid #ccc;
  display:block;
  position: relative;
}
.ap .button .btn-primary {
  background-color:#00a9e4;
  border:none;
  padding: 7px 30px;
  color:#FFF;
  margin: 5px;
}
.ap .button .btn-primary:hover {
  background-color:#004382;
}
.pagebtbox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 95%;
  border-top: 1px solid #ddd;
  padding-top: 15px;
}
.pagebtbox select {
  background-color: #E8F0F3;
  border: none;
  padding: 5px;
  height: 40px;
  border-radius: 4px;
}
.pagebtbox .fast_page {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.pagebtbox ul {
  display: flex;
}
.pagebtbox li {
  padding: 2px;
}
.pagebtbox li a {
  background-color: #E8F0F3;
  color: #333;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagebtbox li.pre a, .pagebtbox li.next a, .pagebtbox li.more a {
  background-color: transparent;
  color: #333;
}
.pagebtbox li.pre a:hover, .pagebtbox li.next a:hover {
  background-color: #E8F0F3;
}
.pagebtbox li a:hover {
  text-decoration: none;
  background-color: #2175c3;
  color: #FFF;
}
.ap .bt-back {
  position:absolute;
  top: -42px;
  right:0;
  display:block;
}
.ap .bt-back a {
  background-color:#00a9e4;
  border:none;
  padding: 5px 10px;
  color:#FFF;
  border-radius:5px;
  display: inline-block;
}
.ap .bt-back a:hover {
  text-decoration:none;
  background-color: #2175c3;
}
@media screen and (min-width: 992px) {
.ap .bt-back {
  display:none;
}
}
@media screen and (max-width: 991px) {
.pagebtbox {
  justify-content: center;
}
.pagebtbox ul {
  flex-wrap: wrap;
  margin-top: 15px;
}
.ap .button.mt-4 {
  display:none;
}
}
/*支付繳費通/單一簽入/生活資訊*/
.iconlist {
  position: relative;
  margin-bottom: 80px;
}
.iconlist ul {
  display: flex;
  flex-wrap: wrap;
}
.iconlist li {
  width: 25%;
  display: flex;
  padding: 10px;
  align-items: stretch;
}
.iconlist li a {
  color: #000;
  font-weight: bold;
  text-align: center;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  width: 100%;
  background-color: #f4f4f4;
  border-radius: 10px;
}
.iconlist li a:hover {
  text-decoration: none;
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  box-shadow: 0 0 10px rgb(0 0 0 / 25%);
}
.iconlist li .icon {
  width: 100%;
}
.iconlist li p {
  width: 100%;
}
@media screen and (max-width: 991px) {
.iconlist li {
  width: 33.333%;
}
}
@media screen and (max-width: 580px) {
.iconlist li {
  width: 50%;
}
.iconlist li img {
  max-width: 100px;
}
}

/*--ap.css整合--*/
/*我的卡片*/
.mycardbox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mycardbox img {
  width: 100%;
}
.mycardbox .mycard {
  position: relative;
  margin-bottom: 20px;
  padding: 20px;
  width:100%;
  text-align:center;
}
.mycardbox .mycard img {
  max-width: 450px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 0 12px hsla(0, 0%, 0%, 0.38);
}
.mycardbox .qrcode01, .mycardbox .qrcode02 {
  padding: 20px;
  width:100%;
  text-align:center;
}
.mycardbox .qrcode01 img {
  max-width: 180px;
}
.mycardbox .qrcode02 img {
  max-width: 280px;
}
.mycardbox .qrcode01 .time {
  display: flex;
  background-color: #e8f0f3;
  padding: 5px 10px;
  border-radius: 5px;
  justify-content: center;
  width: 180px;
  margin: 10px auto;
}
.mycardbox .qrcode01 .time img {
  width: 15px;
  margin-left: 10px;
}
.mycardbox .qrcode02 {
  flex-wrap:wrap;
  justify-content:center;
}
.mycardbox .qrcode02 .barcode {
  width:100%;
  text-align:center;
}
@media screen and (max-width: 991px) {
.mycardbox {
  flex-wrap: wrap;
  justify-content: center;
}
.mycardbox > div {
  width: 100%;
  padding: 10px !important;
  display: flex;
  justify-content: center;
}
.mycardbox .qrcode01 {
  flex-wrap: wrap;
  max-width: 200px;
}
.mycardbox .qrcode01 .time {
  width: 100%;
}
}
/*我的訊息訂閱設定*/
.ap .subtts {
  font-size:105%;
  font-weight: bold;
  margin-bottom: 5px;
}
.ap .checkall {
  display:block;
  position:relative;
  text-align:right;
  margin-bottom: 10px;
}
.ap .checkall div {
  background-color: #fdd200;
  padding: 8px 15px;
  border-radius: 10px;
  display:inline-block;
  position:relative;
  margin-bottom:10px;
}
.ap .checkall label {
  display:inline-block;
  margin:0;
}
.ap .checkbox {
  position:relative;
  padding: 10px 5px;
}
.ap .checkbox label {
  margin:0;
  flex: 2;
}
.ap .checkbox ul  {
  margin:0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ap .checkbox li {
  padding: 4px;
  list-style: none;
  width: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ap .checkbox li.red {
  color:#b10000;
}
.ap .checkbox ul ul {
  padding-left: 30px !important;
  width: 100%;
}
.ap .checkbox li li {
  padding-left: 20px;
}
.ap .checkbox li li:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-top: 2px solid #333;
  border-right: none;
  border-left: 2px solid #333;
  border-bottom: none;
  transform: rotate(135deg);
}
@media screen and (max-width: 580px) {
.ap .checkbox li li {
  width:100%;
}
}
/*選擇行政區域*/
body.home .infoarea {
  padding: 0px;
  margin-bottom: 5px;
}
body.home .infoarea.bottom {
  padding: 0px;
  margin-bottom: 20px;
}
body.home .infoarea .form-flex {
  padding: 0 !important;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
body.home .infoarea .row {
  margin: 0;
}
body.home .infoarea .form_title {
  white-space: nowrap;
}
body.home .infoarea label {
  display:none;
}
body.home .infoarea a.add {
  background-color: #0067b9;
  width:38px;
  height:38px;
  border-radius: 100%;
  position: relative;
  display: block;
}
body.home .infoarea a:hover,
body.home .infoarea a.delete:hover{
  background-color: #607D8B;
}
body.home .infoarea a p {
  display:none;
}
body.home .infoarea a.delete {
  background-color: #F44336;
  width:38px;
  height:38px;
  border-radius: 100%;
  position: relative;
  display: block;
}
body.home .infoarea a.add::before {
  content:"+";
  font-size:200%;
  color:#FFF;
  position:absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.home .infoarea a.delete::before {
  content:"一";
  font-size:130%;
  color:#FFF;
  position:absolute;
  top: 50%;
  left: 50%;
  font-weight: bold;
  transform: translate(-50%, -50%);
}
/*偏好行政區域*/
.ap .areabox {
  position:relative;
  padding: 10px 5px;
}
.ap .areabox label {
  margin:0;
}
.ap .areabox ul {
  display:flex;
  flex-wrap:wrap;
}
.ap .areabox li {
  padding: 4px;
  width: 25%;
  display:inline-flex;
  align-items:center;
}
@media screen and (max-width: 767px) {
.ap .areabox li {
  width: 33.333%;
}
}
@media screen and (max-width: 480px) {
.ap .areabox li {
  width: 50%;
}
}
/*上方設定按鈕*/
.home .setbtn {
  position:absolute;
  right: 15px;
  top: 44px;
  z-index:1;
}
.home .setbtn img {
  width:16px;
  margin-right:4px;
}
.home .setbtn a {
  background-color: #0096ca;
  display: inline-flex;
  border-radius:5px;
  color:#FFF;
  padding:7px 15px;
  text-decoration:none;
  align-items: center;
  justify-content:center;
}
.home .setbtn a.default {
  background-color: #ddd;
  color:#444;
}
.home .setbtn a.search {
  background-color: #0063b2;
  color:#fff;
}
.home .setbtn a:hover {
  background-color:#607D8B;
  color:#FFF;
}
.ap .carinfo .setbtn .btn {
  background-color: #0096ca;
  display:inline-block;
  border-radius:5px;
  color:#FFF;
  padding: 7px 12px 7px 32px;
  position:relative;
  background-image: url(../images/home/ic_card.png) !important;
  background-repeat:no-repeat;
  background-position: 10px center;
  background-size: 18px;
}
.ap .carinfo .setbtn .btn:hover,
.ap .carinfo .setbtn .btn:focus {
  background-color:#607D8B !important;
  color:#FFF !important;
}

@media screen and (max-width: 767px) {
.home .setbtn {
  position:relative;
  display:block;
  top: initial;
  right: initial;
  margin-bottom: 15px;
  text-align: right;
}
}
/*我的車號記錄*/
.mycar {
  padding: 20px 0;
  display:flex;
  flex-wrap:wrap;
}
.mycar .list {
  width:50%;
  padding:20px;
}
.mycar .box {
  align-items: stretch;
  text-align: center;
  box-shadow:1px 1px 15px rgb(0 0 0 / 20%);
  border-radius: 10px;
  overflow: hidden;
}
.mycar .box .pic img {
  max-width: 100%;
}
.mycar .box .pic {
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mycar .box .pic .stitle {
  font-size:180%;
  padding: 15px;
  margin:0;
}
.mycar .box .number {
  margin:0;
  padding: 0 0 20px 0;
  font-size:110%;
}
/*.mycar .box a {
  background-color:#607D8B;
  display:block;
  padding:10px;
  text-decoration:none;
  color:#FFF;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
}*/
.mycar .box .btnbox a:hover,
.mycar .box .btnbox a.buyticket:hover {
  background-color:#00457c;
}
.mycar .box .btnbox {
  display:flex;
}
.mycar .box .btnbox a {
  width:50%;
  background-color:#607D8B;
  display:block;
  padding:10px;
  text-decoration:none;
  color:#FFF;
}
.mycar .box .btnbox a.buyticket {
  background-color:#135d98;
}
body .modal-body p {
  font-size:110%;
  font-weight:600;
}
@media screen and (max-width: 767px) {
.mycar .list {
  width:100%;
  padding:20px;
}
}
/*查繳停車費*/
.ap .carbox {
  position:relative;
  padding:15px;
  margin-bottom:20px;
  box-shadow: 0 0 10px rgb(0 0 0 / 25%);
}
.ap .carinfo {
  position:relative;
  display:block;
  padding:10px 0
}
.ap .carinfo .number {
  font-size:150%;
  font-weight:600;
  color:#005294;
  margin-bottom:5px;
}
.ap .carinfo .total {
  font-size:105%;
}
.ap .carinfo .total span {
  font-size:120%;
  padding:0 5px;
  display:inline-block;
  color:#b00;
  font-weight:600;
}
@media screen and (max-width: 767px) {
.ap .carinfo .setbtn {
  top: 8px;
  position:absolute;
  right:0px;
}
}
/*水號/電號記錄*/
.mylifepay {
  padding: 20px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.mylifepay .list {
  width:50%;
  padding:20px;
  display:inline-flex;
  position:relative;
}
.mylifepay .box {
  position:relative;
  text-align: center;
  box-shadow:1px 1px 10px #777;
  border-radius:10px;
  width:100%;
  padding:0 0 45px 0;
  /* overflow:hidden; */
}
.mylifepay .box .pic img {
  max-width: 100%;
}
.mylifepay .box .pic {
  padding:20px;
}
.mylifepay .box .pic .stitle {
  display:inline-flex;
  font-size:180%;
  padding: 15px;
}
.mylifepay .box .pic p {
  margin:0;
}
.mylifepay .box .number {
  margin:0;
  padding: 0 0 20px 0;
  font-size:110%;
}
.mylifepay .box .note {
  padding:15px 20px;
  text-align:left;
  border-top:1px solid #ccc;
}
.mylifepay .box .delete {
  position:absolute;
  width:100%;
  bottom:0;
}
.mylifepay .box a {
  background-color:#607D8B;
  display:block;
  padding:10px;
  text-decoration:none;
  color:#FFF;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
}
.mylifepay .box a:hover {
  background-color:#0b8089;
}
body .modal-body .col-md-2,
body .modal-body .col-md-8,
body .modal-body .col-12 {
  margin: 0;
  padding: 10px 5px !important;
}
.ap .form-row label span {
  color:#f00;
  padding-left:3px;
}
@media screen and (max-width: 767px) {
.mylifepay .list {
  width:100%;
  padding:20px;
  float:none;
}
}
/*我的訊息專區-便民服務*/
.ap .selist .accordion>.card {
  border: none;
  margin-bottom: 10px;
  width: 100%;
}
.ap .selist .accordion>.card>.card-header {
    padding: 0;
}
.ap .selist button.collapsed {
  border-radius: 5px;
}
.ap .selist button {
  padding: 15px 40px 15px 15px;
  display: block;
  width: 100% !important;
  text-align: left;
  font-size: 105%;
  background-color: #ddebf1;
  text-decoration: none;
  position: relative;
  border:none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color:#000;
}
.ap .selist button::after {
  content: "";
  width: 0;
  height: 0;
  border-top: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 7px #2175C3;
  border-left: solid 5px transparent;
  background-color: transparent;
  top: 50%;
  right: 15px;
  position: absolute;
  transform:translate(-50%,-50%);
}
.ap .selist button.collapsed::after {
  content: "";
  width: 0;
  height: 0;
  border-top: solid 7px #2175C3;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 5px transparent;
  background-color: transparent;
  top: 55%;
  right: 15px;
  position: absolute;
  transform:translate(-50%,-50%);
}
.ap .selist button:focus {
  outline-offset:-3px;
}
.ap .selist button span {
  font-size:95%;
  display:inline-block;
  padding:0 5px;
  color: #606060;
}
.ap .selist button .mtt {
  font-size:105%;
  display: inline-block;
  padding:5px;
  font-weight: 600;
  color: #000;
}
.ap .selist .collapse .card-body .area {
  margin-bottom:20px;
}
.ap .selist .collapse .card-body .note {
  margin-bottom:20px;
  font-size:95%;
  text-align:right;
}
.ap .selist .collapse .card-body .btn01 {
  display:block;
  border-top:2px solid #ccc;
  padding:10px;
  text-align:center;
}
.ap .selist .collapse .card-body .btn01 a {
  display:inline-block;
  padding:8px 25px;
  border-radius:50px;
  text-decoration:none;
  color:#FFF;
  background-color:#0b8089;
  letter-spacing: 2px;
  font-size:105%;
}
.ap .selist .collapse .card-body .btn01 a:hover {
  background-color:#000;
}
.ap .selist .collapse .card-body .stt {
  font-size:105%;
  font-weight:600;
  display:block;
  margin-bottom: 5px;
  padding:0 0 0 20px;
  position:relative;
}
.ap .selist .collapse .card-body .stt::before {
  content:"";
  border-top: .6em solid transparent;
  border-right: .6em solid #0063b9;
  border-bottom: 0;
  border-left: 0 solid transparent;
  width: 0;
  height: 0;
  display: inline-block;
  vertical-align: .255em;
  position: absolute;
  margin-top: 7px;
  left:0;
}
.collapse .card-body .textlist {
  position:relative;
}
.collapse .card-body .textlist ul {
  padding:0;
  list-style-type:none;
}
.collapse .card-body .textlist li {
  list-style-type:none;
  padding:5px 0;
}
.collapse .card-body .textlist li .subtt {
  font-size:110%;
  font-weight:600;
  color:#2c7c87;
  padding:4px 4px 4px 22px;
  margin-bottom:10px;
  position:relative;
  display:inline-block;
}
.collapse .card-body .textlist li .subtt::after {
  position: absolute;
  top: 50%;
  left:0;
  transform: translateY(-50%);
  content: '';
  width: 12px;
  height: 4px;
  background-color: #2c7c87;
}
.collapse .accordion>.card {
    border: none;
}
.collapse .accordion>.card:nth-child(1) .btn-link {
    border: none;
}
.collapse .accordion>.card>.card-header {
    padding: 0;
}
.ap .selist .collapse .card-body {
  background-color: #f5f5f5;
}
.notice {
  position:relative;
  margin-bottom: 25px;
  padding: 10px;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.38);
}
.notice.req {
  background-color:#ffe047;
  border-radius:8px;
  padding: 10px 15px;
}
.notice .s_title {
  font-size:105%;
  font-weight:600;
  margin-bottom:10px;
  position:relative;
  padding: 0 0 0 25px;
  color: #1b707b;
}
.notice .s_title::before {
  content:"";
  border-top: .6em solid transparent;
  border-right: .6em solid #0063b9;
  border-bottom: 0;
  border-left: 0 solid transparent;
  width: 0;
  height: 0;
  display: inline-block;
  vertical-align: .255em;
  position: absolute;
  margin-top: 7px;
  left:5px;
}
.notice .note {
  padding:8px;
  font-size:95%;
  border-top:1px solid #ccc;
  word-break: break-all;
}
@media screen and (max-width: 767px) {
.collapse .card-body .stt {
  background-color:#fcd266;
  padding: 10px 10px 10px 25px !important;
}
.collapse .card-body .stt::before {
  left:5px !important;
}
.collapse .card-body .note {
  text-align:left !important;
}
}
/*服務應用授權管理*/
.popmodal .modal-body div {
  display:block;
  margin-bottom:10px;
}
.popmodal .modal-body .subtt {
  font-size:150%;
  font-weight:600;
}
.popmodal .modal-body span {
  font-size:110%;
  font-weight:600;
  padding:0 15px;
  color:#2175C3;
}
.popmodal .modal-body p {
  display:inline-block;
  padding:0 15px;
  font-weight:normal;
  font-size:100%;
}
.popmodal .modal-body ul {
  padding:0;
  margin:0 0 20px 20px;
}
.popmodal .modal-body li {
  list-style-type:none;
  padding:4px 4px 4px 20px;
  position:relative;
}
.popmodal .modal-body li:before {
  content: "";
  width: 0;
  height: 0;
  border-top: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 7px #2175C3;
  background-color: transparent;
  top: 55%;
  left: 10px;
  position: absolute;
  transform:translate(-50%,-50%);
}
@media (min-width: 576px) {
.popmodal .modal-dialog {
  max-width: 800px !important;
  margin: 1.75rem auto;
}
}
/*表格*/
.home .rwd-table {
  min-width: 100%;
  background-color: #FFF;
  position:relative;
}
.home .rwd-table p {
  margin:0;
}
.home .rwd-table.left03 img {
  margin-right:0px;
  width:20px;
}
.home .rwd-table .sort {
  display:inline-block;
  background-color:#fcd100;
  width:30px;
  height:30px;
  border-radius:50px;
  text-align:center;
  line-height:30px;
  font-weight:600;
}
.home .rwd-table th,
.home .rwd-table td:before {
  color: #000000;
  font-weight: bold;
  background-color: #fcd266;
}
.home .rwd-table.left01 th,
.home .rwd-table.left01 td:before,
.home .rwd-table.left02 th,
.home .rwd-table.left02 td:before,
.home .rwd-table.left03 th,
.home .rwd-table.left03 td:before {
  color: #000000;
  font-weight: bold;
  background-color: #fcd266;
}
.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;
}
.home .rwd-table td a {
  color: #ffffff;
  padding: 8px 10px;
  background-color:#567382;
  text-decoration:none;
  border-radius:3px;
  display: inline-flex;
  /* width: 110px; */
  justify-content: center;
  white-space:nowrap;
  align-items: center;
}
.home .rwd-table td img {
  margin-right:4px;
  width: 16px;
}
.home .rwd-table td .icon {
  font-size:110%;
  display:inline-block;
}
.home .rwd-table td .icon.color01 {
  color:#a00000;
}
.home .rwd-table td .icon.color02 {
  color:#475397;
}
.home .rwd-table td .icon.color03 {
  color:#009206;
}
.home .rwd-table td .icon.color04 {
  color:#2196F3;
}
.home .rwd-table td .icon.color05 {
  color:#F44336;
}
.home .rwd-table td a.color01 {
  background-color:#4CAF50;
}
.home .rwd-table td a.color02 {
  background-color:#2175C3;
}
.home .rwd-table td a:hover {
  background-color:#000;
}
@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,
.home .rwd-table.left01 td:before,
.home .rwd-table.left02 td:before,
.home .rwd-table.left03 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.left01.tt td:first-child {
  display:block;
  padding-right:65px;
  position:relative;
}
.home .rwd-table.left01.tt td {
  display:none;
}
.home .rwd-table.left01 button.btn {
  position:absolute;
  right:5px;
  top: 7px;
  padding: 3px 10px;
  width: initial !important;
  background-color:#268db1;
  color: #FFF;
}
.home .rwd-table.left01 button.btn:after {
  display:none;
}
.home .rwd-table.left01 .modal-footer .btn {
  position:inherit;
}
.home .rwd-table.left01 .modal-body p {
  font-weight:normal;
  font-size:100%;
}
.home .rwd-table.left01 .modal-body p.tt {
  font-weight:600;
}
.home .note01 ul {
  text-align:left !important;
}
}
@media screen and (min-width: 767px) {
.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;
  /* white-space: nowrap; */
  word-break: keep-all;
}
.home .rwd-table th:last-child {
  width:260px;
}
.home .rwd-table.left01 th,
.home .rwd-table.left01 td,
.home .rwd-table.left02 th,
.home .rwd-table.left02 td,
.home .rwd-table.left03 th,
.home .rwd-table.left03 td {
  text-align:left;
  position: relative;
}
.home .rwd-table.left01 th:last-child,
.home .rwd-table.left02 th:last-child,
.home .rwd-table.left03 th:last-child {
  width:inherit;
}
.home .rwd-table.left01 th:nth-child(2) {
  /*width:160px*/
}
.home .rwd-table.left01 th:nth-child(3) {
  width:200px
}
.home .rwd-table.left01 th:nth-child(4),
.home .rwd-table.left01 th:nth-child(5) {
  width:120px;
}
.home .rwd-table.left01.tt td .btn {
  display:none;
}
/*20211021*/
.home .rwd-table.left04 th,
.home .rwd-table.left04 td {
  word-break: break-word;
  text-align:left;
}
.home .rwd-table.left04 th:last-child {
  width:inherit;
}
.home .rwd-table.left04 th:nth-child(5) {
  width:200px;
}
}
.home .ap .note01 {
  border-top:1px solid #ccc;
  position:relative;
  display:block;
  padding:10px;
  margin-bottom: 20px;
}
.home .ap .note01 ul {
  padding:0;
  margin:0;
  /* text-align:right; */
}
.home .ap .note01 li {
  list-style-type:none;
  font-size:95%;
  display:inline-block;
  margin-right:10px;
}
.home .ap .note01 li.color01 i {
  color:#a00000;
}
.home .ap .note01 li.color02 i {
  color:#475397;
}
.home .ap .note01 li.color03 i {
  color:#009206;
}
.home .ap .note01 li.color04 i {
  color:#2196F3;
}
.home .ap .note01 li.color05 i {
  color:#F44336;
}
.home .ap .note01 li i {
  margin-right:4px;
  font-size:110%;
}
/*表格end*/
/*內頁搜尋*/
body.home .search_group {
  padding: 10px;
}
body.home .search_group .form-flex,
body.home .search_group .d-flex {
  padding: 0 !important;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
body.home .search_group .row {
  margin: 0;
}
body.home .search_group .form_title {
  white-space: nowrap;
}
body.home .search_group .day {
  display: inherit;
}
body.home .search_group .btn {
  margin: 4px;
  background-color: #0096ca;
  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: #006588;
  color: #fff;
}
/*我的訊息訂閱列表*/
body.home .ap .list-group .list_title {
  background-color: #fcd266;
  padding: 15px;
  font-size: 120%;
  text-align: center;
  color: #000;
  font-weight: 600;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}
body.home .ap .list-group {
  position:relative;
  margin-top:20px;
  display: block;
}
body.home .ap .list-group ul {
  position:relative;
  margin:0;
  padding:0;
}
body.home .ap .list-group li {
  list-style-type:none;
  display:block;
  border-bottom:1px solid #CCC;
}
body.home .ap .list-group li:last-child {
  border-bottom:none;
}
body.home .ap .list-group li a {
  color:#333;
  padding: 15px 10px 20px 10px;
  display:block;
}
body.home .ap .list-group li a:hover {
  text-decoration:none;
  background-color:#eaeaea;
}
body.home .ap .list-group li p {
  margin:0;
  display:block;
  padding-left: 5px;
  padding-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.home .ap .list-group li span {
  float:left;
  padding:3px 8px 3px 35px;
  border-radius: 50px;
  display:inline-block;
  color:#2c7c87;
  border:2px solid #0ca6ae;
  font-size:85%;
  background-color: #FFF;
  margin-right:5px;
  text-align: center;
  background-repeat:no-repeat;
  background-position:10px center;
  white-space: nowrap;
}
body.home .ap .list-group .list li span.date {
  padding:3px 8px;
  border-radius: 50px;
  display:inline-block;
  color:#727272;
  border:2px solid #00a9e4;
  font-size:85%;
  background-color: #FFF;
  width:inherit;
}
body.home .ap .list-group .list li span.fun {
  width:88px;
  color:#FFF;
  border:2px solid #FF5722;
  background-color: #FF5722;
  padding:3px 8px;
}
body.home .ap .list-group .list li span.tcpass {
  width:88px;
  color:#FFF;
  border:2px solid #0096ca;
  background-color: #0096ca;
  padding:3px 8px;
}
body.home .ap .list-group li .like01 {
  background-image: url(../images/svg/like01.svg);
  border: 2px solid #459dab;
}
body.home .ap .list-group li .like02 {
  background-image: url(../images/svg/like02.svg);
  border: 2px solid #38b7b4;
}
body.home .ap .list-group li .like03 {
  background-image: url(../images/svg/like03.svg);
  border: 2px solid #48b6db;
  background-size:16px;
}
body.home .ap .list-group li .like04 {
  background-image: url(../images/svg/like04.svg);
  border: 2px solid #3c6fb6;
}
body.home .ap .list-group li .like05 {
  background-image: url(../images/svg/like05.svg);
  border: 2px solid #0d89c9;
}
body.home .ap .list-group li .like06 {
  background-image: url(../images/svg/like06.svg);
  border: 2px solid #56b453;
}
body.home .ap .list-group li .like07 {
  background-image: url(../images/svg/like07.svg);
  border: 2px solid #90c54c;
}
body.home .ap .list-group li .like08 {
  background-image: url(../images/svg/like08.svg);
  border: 2px solid #009676;
}
@media screen and (max-width: 767px) {
body.home .ap .list-group li span {
  float:initial;
}
}
/*市府活動行事曆*/
.eventlist {
  position:relative;
}
.eventlist ul {
  list-style-type: none;
  padding:0;
  margin:0;
}
.eventlist li {
  border-bottom:1px solid #ddd;
}
.eventlist li:last-child {
  border:none;
}
.eventlist li a {
  display:block;
  padding:15px 10px;
  color:#000;
}
.eventlist li a:hover {
  text-decoration: none;
  background-color:#eee;
}
.eventlist li p {
  margin:0;
}
.eventlist li .info {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.eventlist li .info img {
  width:16px;
  margin-right:4px;
}
.eventlist li .theme {
  font-weight: bold;
  margin-top: 10px;
}
.eventlist li .info .b-l,
.eventlist li .info .b-r {
  display:inline-flex;
  align-items:center;
}
.eventlist li .info .b-l {
  padding: 2px 5px;
  border-radius: 50px;
  color:#2c7c87;
  border:2px solid #0ca6ae;
  background-color:#fff;
  display:inline-block;
  width: 90px;
  text-align: center;
  font-size: 95%;
}
.eventlist li .info .b-r {
  color:#555;
  padding-left:10px;
}
.eventlist li .info .b-r p {
  padding-right:10px;
  display:flex;
  align-items:center;
}
body.home .search_group .checkbox input[type="checkbox"] {
  display: none;
}
body.home .search_group .checkbox input:checked + .button {
  background: #0b8089;
  color: #fff;
  border:1px solid #0b8089;
}
body.home .search_group .checkbox label {
  margin-bottom:0;
}
body.home .search_group .checkbox .button {
  display: inline-block;
  margin: 4px;
  padding: 6px 7px;/*0127改*/
  color: #487f87;
  cursor: pointer;
  border:1px solid #0b8089;
  background-color: #fff;
}
body.home .search_group .checkbox .button:hover {
  background-color: #0b8089;
  color: #fff;
}
body.home .search_group .checkbox .round {
  border-radius: 5px;
}
body.home .searchbox {
  position:relative;
  padding:15px;
}
body.home .searchbox .show {
  width:100%;
}
body.home .searchbox .btns {
  background-color:#0b8089;
  color:#FFF;
  padding: 10px 15px;
  border-radius: 5px;
  height: 44px;
  position: absolute;
  right: 0;
}
body.home .searchbox .btns:hover {
  text-decoration: none;
  background-color:#00a5ac;
}
body.home .searchbox .btns p {
  display:none;
}
body.home .searchbox .btns:before {
  content: "[-] 綜合查詢";
}
body.home .searchbox .btns.collapsed:before {
  content: "[+] 綜合查詢";
}
body.home .searchbox .card {
  padding: 0;
  border: none;
  background-color:#eee;
  margin-bottom: 10px;
  width: 100%;
}
body.home .searchbox .search_group.no.col-6 {
  padding:0 !important;
  margin-bottom: 10px;
}
body.home .searchbox .search_group.no label {
  display:none;
}
body.home .searchbox .search_group.no a {
  display: inline-block;
  background-color: #ccc;
  width: 40px;
  height: 40px;
  padding:5px;
  border-radius: 100%;
  text-align: center;
}
body.home .searchbox .search_group.no a:hover {
  background-color: #FFC107;
}
body.home .searchbox .search_group.no a i {
  color:#000;
  font-size:120%;
}
body.home .searchbox .search_group.no a p {
  display:none;
}
body.home .ap .eventlist .list_title {
  background-color: #fcd266;
  padding: 15px;
  font-size: 120%;
  text-align: center;
  color: #000;
  font-weight: 600;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}
@media screen and (max-width: 767px) {
.eventlist li .info .b-r {
  margin-top:5px;
  padding-bottom:4px;
  border-bottom: 1px dotted #d9d9d9;
  flex-wrap:wrap;
}
}
@media screen and (max-width: 560px) {
body.home .searchbox .search_group .hidden {
  display:none;
}
}
/*市府活動行事曆內頁*/
.ap .textlist {
  position:relative;
  border-top:1px solid #ccc;
  padding:10px;
}
.ap .textlist ul {
  padding:0;
  list-style-type:none;
}
.ap .textlist li {
  list-style-type:none;
  padding:5px 0;
}
.ap .textlist li .subtt {
  font-size:110%;
  font-weight:600;
  color: #0085b4;
  padding:4px 4px 4px 22px;
  margin-bottom:10px;
  position:relative;
  display:inline-block;
}
.ap .textlist li .subtt::after {
  position: absolute;
  top: 50%;
  left:0;
  transform: translateY(-50%);
  content: '';
  width: 12px;
  height: 4px;
  background-color: #0085b4;
}
/*好康優惠*/
body.home .ap .list_coupon {
  margin: 0 0 35px 0;
}
body.home .ap .list_coupon ul {
  padding: 0;
  margin: 0;
  list-style-type:none;
}
body.home .ap .list_coupon li {
  padding: 10px !important;
  position:relative;
}
body.home .ap .list_coupon li .box {
  display: block;
  border-radius: 0;
  padding: 12px !important;
  background-color: #fff;
  -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  position:relative;
}
body.home .list_coupon img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  width: 100%;
}
body.home .ap .list_coupon .pic {
  height: 160px;
  width: 100%;
  background-color: #f3f3f3;
  vertical-align: middle;
  position:relative;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  overflow: hidden;
  background-image: url(../images/home/couponBG.png);
  background-position:center;
  background-size:cover;
  padding:15px;
}
body.home .ap .list_coupon .pic img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
}
@media (max-width:575px) {
body.home .ap .list_coupon .pic img {
  position:initial;
  transform: initial;;
  padding: 0;
}
}
body.home .ap .list_coupon .info .subject {
  color: #00838d;
  text-align: center;
  font-size: 115% !important;
  line-height: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.home .ap .list_coupon .info .stt {
  color: #a40000;
  text-align: center;
  font-size: 100% !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.home .ap .list_coupon .info {
  position:relative;
  color: #555;
  margin: 10px 0;
  letter-spacing:0;
}
body.home .ap .list_coupon .info i {
  padding-right:8px;
}
body.home .ap .list_coupon .info span {
  display:block;
  font-size:95%;
  padding:2px 0;
}
body.home .ap .list_coupon .info .w01,
body.home .ap .list_coupon .info .w02 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
body.home .ap .list_coupon .info .w01 {
  border-top:1px solid #e4e4e4;
  margin-top:5px;
  padding-top:5px;
}
body.home .ap .list_coupon .box .btn {
  display:block;
  position:relative;
  padding: 0;
  border-radius: 50px;
}
body.home .ap .list_coupon .box .btn a {
  padding:8px 10px;
  display: block;
  color:#FFF;
  text-decoration:none;
}
body.home .ap .detail.coupon_c {
  max-width:730px;
  margin:auto;
}
body.home .ap .detail .coupon_img {
  border-radius: 10px;
  overflow:hidden;
  margin-bottom:30px;
  position:relative;
  display:block;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.50);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.50);
}
body.home .ap .detail .coupon_img img {
  width:100%;
}
body.home .ap .detail .coupon_img .txt {
  position:absolute;
  z-index: 1;
  display:block;
  background-color: rgba(0,0,0,0.65);
  padding: 12px 15px;
  bottom: 0px;
  color: #FFF;
  width: 100%;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.home .ap .detail .coupon_img .pic {
  width: 100%;
}
/*好康優惠*/
body.home .ap .list_coupon .sale {
  position:relative;
  background-color: #17a2b8;
  text-align: center;
  padding: 5px;
}
body.home .ap .list_coupon .sale p {
  margin:0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fbff00;
}
body.home .ap .list_coupon .sale p.t01 {
  font-size:92%;
  font-weight: bold;
}
body.home .ap .list_coupon .sale p.t02 {
  font-size:85%;
}
body.home .ap .detail .coupon_pic {
  border-radius: 10px;
  overflow:hidden;
  margin-bottom:30px;
  position:relative;
  display:block;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.50);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.50);
}
body.home .ap .detail .coupon_pic .pic {
  width: 100%;
  vertical-align: middle;
  position:relative;
  padding: 30px;
}
body.home .ap .detail .coupon_pic  img {
  max-width: 100%;
  margin: auto;
  width: 100%;
}
body.home .ap .detail .coupon_pic .sale {
  position:relative;
  background-color: #17a2b8;
  text-align: center;
  padding: 10px;
}
body.home .ap .detail .coupon_pic .sale p {
  margin:0;
  display:block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fbff00;
}
body.home .ap .detail .coupon_pic .sale p.t01 {
  font-size:110%;
  font-weight: bold;
}
@media screen and (max-width: 480px) {
body.home .ap .detail .coupon_pic .pic {
  padding: 15px;
}
}
@media screen and (max-width: 575px) {
body.home .ap .list_coupon .pic {
  height: auto;
}
body.home .ap .list_coupon .info .subject,
body.home .ap .list_coupon .info .stt  {
  overflow: inherit;
  white-space: inherit;
  text-overflow: inherit;
}
}
/*單頁內容*/
@media screen and (max-width: 430px) {
body.home .ap .detail .info .date {
  width:100%;
  margin-bottom:5px;
}
}
body.home .ap .detail .info {
  display:flex;
  font-size: 95%;
  flex-wrap: wrap;
  margin:5px 0;
  align-items: center;
  border-top:1px solid #ccc;
  padding-top:10px;
}
body.home .ap .detail p {
  margin-bottom:0px;
  display:inline-flex;
}
body.home .ap .detail .edit p {
    display: block;
}
body.home .ap .detail .info .date {
  margin-right:10px;
}
body.home .ap .detail .info .date i {
  padding-right:5px;
}
body.home .ap .detail .info .map {
  background-color:#fcd266;
  color:#000;
  border-radius:50px;
  padding:2px 10px;
}
body.home .ap .detail .info .sort01 {
  background-color:#FF5722;
  color:#FFF;
  border-radius:50px;
  padding:2px 10px;
  margin-left:5px;
}
body.home .ap .detail .info .sort02 {
  background-color:#00a9e4;
  color:#FFF;
  border-radius:50px;
  padding:2px 10px;
  margin-left:5px;
}
body.home .ap .detail .info.a {
  display:block;
  /*border-bottom: 2px solid #7fc5c7;*/
  padding:10px 15px;
  margin-bottom: 10px;
  background-color:#dee9ea;
  border-radius:5px;
}
body.home .ap .detail .info.a p {
  margin-bottom:5px;
  width:50%;
  float:left;
}
body.home .ap .detail .subject {
  font-size:130%;
  font-weight:600;
  padding:5px 0;
  color: #00698e;
}
body.home .ap .detail .subject01 {
  font-size:150%;
  font-weight:600;
  padding:5px 0;
  color: #0b8089;
  border-bottom: 1px solid #000;
  display:inline-block;
}
body.home .ap .detail .subtitle {
  font-size:105%;
  font-weight:600;
  border:0;
  padding:0 0 5px 0;
  margin-bottom:0px;
  color: #6f493d;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
}
body.home .ap .detail .cpnote ul {
  list-style-type:none;
  padding:0;
  margin-top:20px;
}
body.home .ap .detail .cpnote li {
  padding:4px 0;
}
body.home .ap .detail .cpnote li .dis {
  color:#a50f00;
  font-size:105%;
}
body.home .ap .detail .cpnote span {
  font-weight:600;
  color:#000;
}
body.home .ap .detail .edit {
  padding: 20px 0;
  line-height:28px;
  /* font-size:105%; */
}
body.home .ap .detail .subtitle::before {
  content:"";
  display: none;
}
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: #2c7c87;
}
body.home .ap .detail .download,
body.home .ap .detail .link {
  margin: 35px 0 0 0;
}
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),
body.home .ap .detail .link 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 .detail .link {
  position:relative;
}
body.home .ap .detail .link ul {
  display:block;
  padding:0;
  margin-top: 5px;
  margin-bottom: 20px;
}
body.home .ap .detail .link li {
  display:inline-block;
  margin: 0;
}
body.home .ap .detail .link li img {
  margin-right:5px;
  width:16px;
}
body.home .ap .detail .link li a {
  background-color:#337ab7;
  color:#FFF;
  text-decoration:none;
  display:inline-flex;
  border-radius:3px;
  margin: 4px 2px;
  padding: 6px 12px;
  align-items:center;
}
body.home .ap .detail .link li a:hover {
  background-color:#f28711;
}
body.home .ap .detail .gallery {
  position:relative;
}
body.home .ap .detail .gallery ul {
  padding:0;
  list-style-type:none;
}
body.home .ap .detail .gallery li {
  /* float:left; */
  /* width:25%; */
  padding:10px;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: all .3s ease-out;
}
body.home .ap .detail .gallery li img {
  width: 100%;
}
/*相關圖片
body.home .ap .album {
   position:relative; 
}
body.home .ap .album .rowlist {
    padding:0 10px;
}
body.home .ap .album .list {
    margin-top:20px;
}
body.home .ap .album .rowlist .pic img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    width:100%;
}
body.home .ap .album .rowlist .pic {
    height: 200px;
    max-width:  100%;
    background-color:  #f0f0f0;
    display:  flex;
    align-items: center;
    justify-content:  center;
    overflow:hidden;
    border: 6px #ffffff solid;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
}
body.home .ap .album .rowlist .txt {
    margin:15px 0;
    line-height: 24px;
    padding:0 10px;
    font-size: 97%;
}
.fancybox-close {
  background-image: url(../images/all/pic_close.png) !important;
  width:70px !important;
  height:70px !important;
  background-color: hsl(0deg 0% 0% / 70%);
  border-radius:100%;
  background-repeat:no-repeat;
  background-position:center;
  top: 25px !important;
  right: 45px !important;
  position: fixed !important;
}
.fancybox-nav {
  width:20% !important;
}
.fancybox-nav span {
  top:45% !important;
}
.fancybox-next span {
  background-image: url(../images/all/pic_next.png) !important;
  width:70px !important;
  height:70px !important;
  background-color: hsl(0deg 0% 0% / 70%);
  border-radius:100%;
  background-repeat:no-repeat;
  background-position: center !important;
}
.fancybox-prev span {
  background-image: url(../images/all/pic_prev.png) !important;
  width:70px !important;
  height:70px !important;
  background-color: hsl(0deg 0% 0% / 70%);
  border-radius:100%;
  background-repeat:no-repeat;
  background-position: center !important;
}
@media screen and (max-width: 575px) {
body.home .ap .album .rowlist .pic {
  height:auto;
}
}*/
/*相關圖片*/
.modal-open .modal .modal-body.picimg img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  width: inherit;
  max-width: 100%;
}
.album .modal.show .modal-dialog {
  max-width: 900px;
}
.album #image-gallery .modal-footer {
  display: block;
  position: absolute;
  width: 100%;
  top: 44%;
  border: none;
  padding: 0;
}
.album .modal-content {
  height: 60vh;
  background-color:#000;
}
.album .modal-footer button {
  border: none;
  background: transparent;
}
.album .modal-footer button img {
  opacity: .5;
}
.album .modal-footer button img:hover {
  opacity: 1;
}
.album .modal-footer button:focus {
  outline: none;
}
.album button.close {
  width: 20px;
  height: 20px;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  background: #000;
  padding: 20px;
  display: block;
}
.album .modal-title {
  padding: 10px;
  background: #000;
  color: #FFF;
  font-weight:initial;
  font-size:100%;
}
.album {
  position:relative;
}
.album ul {
  position:relative;
  list-style-type:none;
  padding:0;
  margin: 0;
}
.album li {
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  position:relative;
}
.album li a {
  color:#333;
  /* padding:10px; */
  display:block;
  width:100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-decoration:none;
  border-radius: 5px;
  overflow: hidden;
}
.album li a:focus {
  outline-offset:2px;
}
.album li a:hover {
  text-decoration:none;
}
.album li p {
  margin:0;
  padding: 5px;
  display:block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*background-color: #f5f5f5;*/
}
.album .pic {
  position: relative;
  padding-top: 67%;
  background-color: #e5e5e5;
  overflow: hidden;
}
.album .pic img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  transition: all 250ms ease-out 0s;
  padding: 0;
  border-radius: 0;
}
.album li a:hover .pic img {
  -moz-transform: scale(1.1) translate(-45%, -45%);
  -webkit-transform: scale(1.1) translate(-45%, -45%);
  -o-transform: scale(1.1) translate(-45%, -45%);
  -ms-transform: scale(1.1) translate(-45%, -45%);
  transform: scale(1.1) translate(-45%, -45%);
}
/*常見問答*/
.ap .qabtn {
  position:relative;
  margin-bottom:20px;
}
.ap .qabtn ul {
  list-style-type:none;
  padding:0;
  display: flex;
  flex-wrap: wrap;
  align-items:center;
}
.ap .qabtn li {
  padding:5px;
  width:20%;
}
.ap .qabtn li img {
  padding-right:5px;
}
.ap .qabtn li a {
  padding: 8px 10px;
  display:inline-flex;
  background-color:#fcd266;
  color:#000;
  text-decoration:none;
  border-radius:50px;
  width:100%;
  justify-content:center;
  align-items:center;
}
.ap .qabtn li:nth-child(1) a {
  background-color: #82d4f1;
}
.ap .qabtn li a:hover {
  background-color:#00a9e4;
  color:#FFF;
}
@media screen and (max-width: 991px) {
.ap .qabtn li {
  width:25%;
}
}
@media screen and (max-width: 767px) {
.ap .qabtn li {
  width:50%;
}
}
@media screen and (max-width: 420px) {
.ap .qabtn li {
  width:100%;
}
}
/*網站導覽*/
.home .sitemap .sitemap_note {
  padding: 13px;
  line-height: 160%;
  border-top:1px solid #ccc;
}
.home .sitemap ul {
  padding: 0 15px;
  margin: 5px 0;
  list-style-type: none;
  transition: all .3s ease-out;
}
.home .sitemap ul ul {
  padding: 0 15px;
  margin: 0;
}
.home .sitemap li a {
  padding: 5px 15px 5px 25px;
  color: #000;
  position: relative;
  font-size: 105%;
  text-decoration: none;
  display:block;
}
.home .sitemap ul li a:hover {
  background-color: #cbe7f2;
}
.home .sitemap ul ul li a {
  font-size: 100%;
  padding: 5px 0 5px 25px;
  color: #383838;
}
.home .sitemap ul ul ul li a {
  font-size: 95%;
  padding: 5px 0 5px 28px;
  color: #555;
}
.home .sitemap ul li a::before {
  width: 0;
  height: 0;
  border-top: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 6px #292929;
  background-color: transparent;
  top: 35%;
  bottom: inherit;
  left: 10px;
  content: "";
  position: absolute;
}
.home .sitemap ul ul li a::before {
  border-top: solid 1px #2f2f2f;
  border-right: solid 1px #2f2f2f;
  -webkit-transform: rotate(45deg);
  border-left: solid 0px transparent;
  border-bottom: solid 0px transparent;
  transform: rotate(45deg);
  width: 7px;
  height: 7px;
  top: 41%;
  margin-right: 5px;
}
.home .sitemap ul ul ul li a::before {
  content: "_";
  border: none;
  left: 13px;
  transform: none;
  transform: none;
  top: inherit;
  margin-right: 0;
}
.home .sitemap ul li.title a {
  background-color: #fcd266;
  padding: 8px 15px;
  color: #000;
  text-align: center;
  font-weight: bold;
  font-size: 105%;
  margin: 5px 0;
  border-radius: 50px;
}
.home .sitemap ul li.title a:hover {
  background-color: #ffad07;
}
.home .sitemap ul li.title a::before {
  display: none;
}
/*福利資訊*/
.welfare {
  position:relative;
  display:flex;
  justify-content:space-between;
  flex-wrap: wrap;
  padding:20px;
}
.welfare div {
  margin-bottom:10px;
}
.welfare img {
  max-width:90px;
  max-height:90px;
  width:100%;
}
.welfare a {
  color:#333;
  display:block;
  padding:20px;
  background-color:#efefef;
  border-radius:20px;
}
.welfare a:hover {
  text-decoration:none;
  background-color:#fff490;
}
.welfare .icon {
  display: block;
  border-radius:100%;
  box-shadow: 0px 0px 15px #ccc;
  text-align:center;
  padding: 25px;
  background-color:#FFF;
  position: relative;
}
.welfare .title {
  font-size:120%;
  color:#2c7c87;
  font-weight:bold;
  text-align:center;
  border-bottom:1px solid #ccc;
  padding:4px 0;
  margin-bottom:5px;
}
.welfare ul {
  list-style-type:none;
  padding: 0;
  text-align:center;
  margin: 0;
}
.welfare li {
  display:block;
  text-align:left;
  padding:4px 0 0 10px;
}
.welfare li:before {
  content:""
}
.welfare .link {
  color:#7d7d7d;
  font-size:90%;
  text-align:center;
  padding:5px 0;
}
.welfare .link a {
  color:#b03860;
  display:inline-block;
  padding:0;
  background-color:transparent;
  border-radius:0;
  font-weight:bold;
}
.welfare .link a:hover {
  text-decoration:underline;
}
@media screen and (max-width: 1200px) {
.welfare a {
  padding: 15px;
}
}
@media screen and (max-width: 991px) {
.welfare {
  justify-content:center;
}
.welfare div {
  margin:10px;
}
.welfare .title {
  margin:0 0 10px 0;
}
}
@media screen and (max-width: 510px) {
.welfare div {
  width:100%;
  text-align:center;
}
.welfare .icon {
  width: 140px;
  height: 140px;
  margin: 10px auto;
}
.welfare ul {
  display:inline-block;
  margin: auto;
}
.welfare li {
  padding:4px 0;
}
}
/*聯絡我們列表*/
.ap .ctbt {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.ap .ctbt a {
  color:#FFF;
  display: inline-flex;
  padding:8px 15px;
  background-color:#0088b7;
  border-radius:5px;
  align-items:center;
}
.ap .ctbt a:hover {
  text-decoration: none;
  background-color:#006284;
}
.ap .contlist .accordion>.card {
  border: none;
  margin-bottom: 10px;
  width: 100%;
}
.ap .contlist .accordion>.card>.card-header {
    padding: 0;
}
.ap .contlist button.collapsed {
  border-radius: 5px;
}
.ap .contlist button {
  padding: 15px 40px 15px 15px;
  display: block;
  width: 100% !important;
  text-align: left;
  font-size: 105%;
  background-color: #ddebf1;
  text-decoration: none;
  position: relative;
  border:none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color:#000;
}
.ap .contlist button::after {
  content: "";
  width: 0;
  height: 0;
  border-top: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 7px #2175C3;
  border-left: solid 5px transparent;
  background-color: transparent;
  top: 50%;
  right: 15px;
  position: absolute;
  transform:translate(-50%,-50%);
}
.ap .contlist button.collapsed::after {
  content: "";
  width: 0;
  height: 0;
  border-top: solid 7px #2175C3;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 5px transparent;
  background-color: transparent;
  top: 55%;
  right: 15px;
  position: absolute;
  transform:translate(-50%,-50%);
}
.ap .contlist button:focus {
  outline-offset:-3px;
}
.ap .contlist button span {
  font-size:95%;
  display:inline-block;
  padding:0 5px;
  color: #606060;
}
.ap .contlist button .mtt {
  font-size:105%;
  display: inline-block;
  font-weight: 600;
}
.ap .contlist .accordion>.card button {
  display:flex;
  align-items: center;
}
.ap .contlist .accordion>.card button p {
  margin-bottom:5px;
  font-size:95%;
}
.ap .contlist .accordion>.card button .tt-l {
  padding:0 15px 0 0;
  text-align: center;
}
.ap .contlist .accordion>.card button .tt-r {
}
.ap .contlist .accordion>.card button .tt-l p {
  padding:5px 10px;
  color:#FFF;
  white-space:nowrap;
}
.ap .contlist .accordion>.card button .tt-l .qa {
  font-weight: bold;
  background-color:#999;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.ap .contlist .accordion>.card button .tt-l .state {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.ap .contlist .accordion>.card button .tt-l .state.c01 {
  background-color: #009688;
}
.ap .contlist .accordion>.card button .tt-l .state.c02 {
  background-color: #ff5722;
}
.ap .contlist .accordion>.card button .tt-l .state.c03 {
  background-color: #00a9e4;
}
.ap .contlist .card-body .date span {
  font-weight: bold;
  display:inline-block;
}
.ap .contlist .card-body .date p {
  display:inline-block;
  margin-bottom:5px;
}
.ap .contlist .card-body .text span {
  font-weight: bold;
}
@media screen and (max-width: 520px) {
.ap .contlist .accordion>.card button {
  flex-wrap:wrap
}
.ap .contlist .accordion>.card button .tt-l {
  width:100%;
  display:flex;
}
.ap .contlist .accordion>.card button .tt-r {
  width:100%;
}
.ap .contlist .accordion>.card button .tt-l .qa,
.ap .contlist .accordion>.card button .tt-l .state {
  border-radius:50px;
  margin-right:10px;
}
}







  


/**/
.home .monthbtn {
  position:absolute;
  right:10px;
  top: 10px;
}
.home .monthbtn a {
  padding: 12px 20px;
  background-color:#0b8089;
  display: inline-flex;
  float:left;
  color:#FFF;
  font-size:130%;
  text-decoration:none;
  justify-content: center;
  height: 45px;
}
.home .monthbtn a:hover,
.home .monthbtn a.today:hover {
  background-color:#4dc0c5;
}
.home .monthbtn a.today {
  border-radius:5px;
  margin-right:8px;
  font-size:105%;
  padding:10px 15px;
  background-color:#5C7B84;
}
.home .monthbtn a.pre {
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  margin-right:1px;
}
.home .monthbtn a.next {
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}
@media screen and (max-width: 360px) {
.home .monthbtn a.today {
  padding:10px;
}
.home .monthbtn a {
  padding: 12px 15px;
}
}
/**/
.ap .rule {
  padding: 25px;
  border-radius:10px;
  display:block;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
.ap .rule .mtt {
  font-size:120%;
  font-weight:600;
  margin: 10px 0;
  color: #006b90;
}
.ap .rule .stt {
  font-size:110%;
  font-weight:600;
  margin-bottom:10px;
}
.ap .rule p {
  margin-bottom:10px;
}
.ap .rule ul {
  padding: 0 0 0 20px;
}
.ap .rule li {
  padding:2px;
  list-style-type: decimal;
}
.ap .rule li span {
  font-weight:bold;
}
.ap .rule p.title {
  font-size:110%;
  font-weight:600;
  color:#a00000;
}
.ap .rule.vis ul {
  padding:0;
}
.ap .rule.vis li {
  padding:6px;
  list-style-type: none;
  border-bottom: 1px dotted #ccc;
}
.ap .rule.vis li span {
  font-weight:bold;
}
.ap .rule.vis li:first-child {
  border-top: 1px dotted #ccc;
}
.ap .rule.vis .subtt {
  font-size:105%;
  font-weight:bold;
  padding:10px 0;
}
.ap .rule.vis .time {
  display:block;
  text-align:center;
  font-size:120%;
  color:#2c7c87;
}
.ap .rule.vis .qrcode {
  display:block;
  text-align:center;
  max-width:400px;
  margin:auto;
}
.ap .rule.vis .qrcode img {
  width:100%;
}
@media screen and (max-width: 767px) {
.ap .form-row .con {
  margin-top: 0px !important;
}
}


/*我的報名*/
body.home .ap .list_group {
  margin: 0 0 35px 0;
}
body.home .ap .list_group ul {
  padding: 0;
  margin: 0;
  list-style-type:none;
}
body.home .ap .list_group li {
  padding: 10px !important;
  position:relative;
  /*min-height: 345px;*/
}
body.home .ap .list_group li .box {
  display: block;
  border-radius: 0;
  padding: 12px;
  background-color: #fff;
  -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  position:relative;
}
body.home .ap .list_group li .box:hover {
  /*background-color: #f1f1f1;*/
  /*border-radius: 10px;*/
  text-decoration:none;
}
body.home .list_group img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.home .ap .list_group .pic {
  height: 160px;
  width: 100%;
  background-color: #f3f3f3;
  vertical-align: middle;
  position:relative;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  overflow: hidden;
  padding-top: 65%;
}
body.home .ap .list_group .info .sort {
  display:inline-block;
  padding:2px 10px;
  background-color:#a02600;
  border-radius:5px;
  color:#FFF;
  position:absolute;
  top:-40px;
  right:10px;
}
body.home .ap .list_group .info .exp {
  display:inline-block;
  padding:2px 10px;
  background-color:#999999;
  border-radius:5px;
  color:#FFF;
  position:absolute;
  top:-40px;
  right:10px;
}
body.home .ap .list_group .info .subject,
body.home .ap .list_group .info .subject a {
  color: #00656d;
  text-align: left;
  font-size: 105% !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 55px;
  line-height: 26px;
}
body.home .ap .list_group .info {
  position:relative;
  color: #333;
  margin: 5px 0 0 0;
  letter-spacing:0;
}
body.home .ap .list_group .info span {
  display:block;
  font-size:95%;
  padding:2px 0;
}
body.home .ap .list_group .info p {
  display:inline-block;
}
body.home .ap .list_group .info .w01,
body.home .ap .list_group .info .w02 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
body.home .ap .list_group .info .w03 {
  border-top:1px solid #e4e4e4;
  margin-top:5px;
}
body.home .ap .list_group .box .btn {
  display:block;
  padding: 0;
}
body.home .ap .list_group .box .btn a {
  /*background-color:#004f8e;*/
  padding:8px 10px;
  display: block;
  color:#FFF;
  text-decoration:none;
}
body.home .ap .list_group .box .btn a:hover {
  /*background-color:#006dc3;*/
}
body.home .ap .list_group .box .btn.btn-warning a {
  color:#656565 !important;
}
body.home .ap .list_group .box .btn.btn-info a {
  background-color: #00a9e4;
  border-color: #00a9e4;
}
@media screen and (max-width: 767px) {
body.home .ap .list_group .pic {
  height: auto;
}
body.home .ap .list_group .info .subject,
body.home .ap .list_group .info .subject a {
  -webkit-line-clamp: inherit;
  height: inherit;
}
}
@media screen and (max-width: 992px) {
body.home .ap .detail .info.a p {
  width: 100% !important;
  float: none !important;
}
}
/*20210415*/
body.home .ap .list_group .modal-body {
  text-align:center;
}
body.home .ap .list_group .modal-body img {
  max-width:400px !important;
}
@media screen and (max-width: 767px) {
body.home .ap .list_group .modal-body img {
  max-width:300px !important;
}
}



@media screen and (max-width: 575px) {
.vote .pic {
  height: auto !important;
}
.vote .form-group .stt label {
  text-align:left !important;
  padding:0 !important;
}
}
/*問卷調查*/
.vote {
  position:relative;
}
.vote img {
  /* width:100%; */
}
.vote .pic {
  padding:10px;
  margin-bottom:10px;
  height: 170px;
  width: 100%;
  background-color: #f3f3f3;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  padding-top: 50%;
  overflow: hidden;
}
.vote .pic img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.vote .subtitle {
  position:relative;
  padding: 10px 5px;
}
.vote .subtitle::before {
  display:none;
}
.vote .note {
  padding:5px 0;
}
.vote .area {
  margin-bottom: 15px;
}
.vote .subject {
  font-size:110%;
  font-weight:600;
  display:inline-block;
  position:relative;
  padding: 5px 5px 5px 25px;
}
.vote .subject::after {
  position: absolute;
  top: 50%;
  left:0;
  transform: translateY(-50%);
  content: '';
  width: 12px;
  height: 4px;
  background-color: #00a9e4;
}
.vote .note span,
.vote .subject span {
  padding:0px 5px;
  font-weight:bold;
}
.vote .col-sm-1,
.vote .col-sm-2,
.vote .col-sm-4,
.vote .col-sm-3,
.vote .col-sm-10,
.vote .col-sm-11 {
  padding: 5px !important;
}
.vote .form-group {
  padding: 0 0 0 16px;
  margin: 4px;
}
.vote .form-group label {
  margin:0;
  padding: 2px 0 0 30px;
  display: block;
}
.vote .form-group .stt label {
  padding:5px 0;
  text-align:center;
  display: block;
}
.vote .pt-0 {
  font-weight:bold;
}
.vote .form-check-inline .form-check-input {
  position:absolute;
  top:5px;
}
.vote .form-group .count {
  padding:0 5px;
  font-weight:600;
  color: #346176;
}
.vote .form-group .count.a {
  padding:0;
  display:block;
}

/*登入選項*/
.login_reg {
  position:relative;
}
.login_reg div.fb, .login_reg div.google, .login_reg div.line, .login_reg div.self {
  display:block;
  padding:10px;
  text-align:center;
}
.login_reg div a {
  display:block;
  padding:15px;
  border-radius:50px;
  color:#FFF;
  font-size:110%;
  font-weight:bold;
  letter-spacing:1px;
}
.login_reg div a:hover {
  text-decoration:none;
  background-color:#009688;
}
.login_reg .fb a {
  background-color:#4267b2;
}
.login_reg .google a {
  background-color:#C00;
}
.login_reg .line a {
  background-color:#00b900;
}
.login_reg .self a {
  background-color:#00a5ac;
}
/*中獎名單*/
body.home .ap .detail .edit .title01 {
  display: block;
  padding: 12px 30px;
  border-radius:50px;
  background-color: #5C7A84;
  color: #fff;
  font-weight:bold;
  font-size:140%;
  margin: 30px 0px 10px 0;
  text-align: center;
}
body.home .ap .detail .edit .subtt02 {
  display: block;
  padding: 0;
  margin:0 0 10px 0;
  color: #2c7c87;
  font-weight:bold;
  font-size:140%;
}
.namelist {
  width:100%;
}
.namelist th {
  color: #000000;
  font-weight: bold;
  background-color: #fff2b2;
}
.namelist tr {
  background-color:#FFF;
}
.namelist tr:nth-child(2n+1) {
  background-color:#f2f2f2;
}
.namelist th,
.namelist td {
  padding:5px;
  text-align:center;
}
/*20210831目錄頁*/
/*選單列表*/
.home .treelist {
  position:relative;
  display:block;
}
.home .treelist ul {
  padding: 0 5px;
  margin: 0;
  list-style-type: none;
  transition: all .3s ease-out;
}
.home .treelist ul ul {
  padding: 0 15px;
  margin: 0;
}
.home .treelist li a {
  padding: 8px 15px 8px 25px;
  color: #000;
  position: relative;
  text-decoration: none;
  border-radius: 3px;
  display:block;
  border-bottom:1px dotted #ccc;
}
.home .treelist li a:hover {
  background-color: #cbe7f2;
  -moz-transform: translate(-40px,8px);
  -webkit-transform: translate(-10px,3px);
  -o-transform:translate(-40px,8px);
  -ms-transform:translate(-40px,8px);
  transform: translate(-3px,-3px);
  box-shadow:2px 2px 8px #ccc;
}
.home .treelist li.title a {
  background-color: #ffe97e;
  color: #000;
  font-weight: bold;
  margin: 5px 0;
}
.home .treelist li.title a:hover {
  background-color: #00a5ac;
  color: #fff;
}
.home .treelist li.title a::before {
  content:"";
  position:absolute;
  width: 15px;
  height: 4px;
  background-color:#00a5ac;
  left:0;
  top: 45% !important;
  border: none;
}
.home .treelist li.title a:hover::before {
  background-color:#FFF;
}
.home .treelist li a::before {
  width: 0;
  height: 0;
  border-top: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 6px #292929;
  background-color: transparent;
  top: 35%;
  bottom: inherit;
  left: 10px;
  content: "";
  position: absolute;
}
.home .treelist li li a::before {
  border-top: solid 1px #2f2f2f;
  border-right: solid 1px #2f2f2f;
  -webkit-transform: rotate(45deg);
  border-left: solid 0px transparent;
  border-bottom: solid 0px transparent;
  transform: rotate(45deg);
  width: 7px;
  height: 7px;
  top: 41%;
  margin-right: 5px;
}
/*20210923開班課表格*/
.home .rwd-table01 {
  min-width: 100%;
  background-color: #FFF;
  position:relative;
}
.home .rwd-table01 p {
  margin:0;
  padding:3px;
  border-bottom:1px dotted #ccc;
}
.home .rwd-table01 p:last-child {
  border-bottom:none;
}
.home .rwd-table01 td i {
  margin-right:5px;
  display:inline-block;
}
.home .rwd-table01 th,
.home .rwd-table01 td:before {
  color: #000000;
  font-weight: bold;
  background-color: #fff2b2;
  border-bottom:1px solid #ccc;
}
.home .rwd-table01 tr:nth-of-type(2n+1) {
  background: hsl(0deg 0% 100%);
}
.home .rwd-table01 tr {
  border-bottom:1px solid #ccc;
  position: relative;
}
.home .rwd-table01 tr:last-child {
  border-bottom:none;
}
.home .rwd-table01 td a {
  color: #ffffff;
  padding: 8px 10px;
  background-color:#567382;
  text-decoration:none;
  border-radius:3px;
  /* margin-bottom:4px; */
  display: block;
  text-align: center;
  width: 90px;
  font-size: 100%;
}
.home .rwd-table01 .btn-group-lg>.btn,
.home .rwd-table01 .btn-lg {
  border:none;
}
.home .rwd-table01 td a:hover {
  background-color:#000;
}
.home .rwd-table01 ul {
  list-style-type:none;
  padding:0;
  margin:0;
  width:100%;
}
.home .rwd-table01 li {
  padding:5px;
  width: 150px;
  background-color:#e9edf6;
}
.home .rwd-table01 li:nth-child(2n+2) {
  background-color:#d6e0ec;
}
.home .rwd-table01 ul.h li {
  background-color:transparent;
  border-bottom:1px dotted #ccc;
  width:inherit;
}
.home .rwd-table01 ul.h li:last-child {
  border-bottom:none;
}
.home .rwd-table01 li:last-child {
  border-bottom:none;
}
.home .rwd-table01 li p {
  display:inline-block;
  margin-right:4px;
  font-weight:bold;
  padding:0;
  border-bottom:none;
}
@media screen and (max-width: 992px) {
.home .rwd-table01 {
  /*background-color: hsl(54deg 100% 91%);*/
  overflow: hidden;
}
.home .rwd-table01 th,
.home .rwd-table01 td:before {
  color: #000000;
  font-weight: bold;
  background-color: #d7e4e6;
  border-bottom:none;
} 
.home .rwd-table01 th {
  display: none;
} 
.home .rwd-table01 tr {
  display:block;
  border-bottom: 3px solid #ccc;
}
.home .rwd-table01 td:before {
  content: attr(data-th) "";
  font-weight: bold;
  margin-right: 5px;
  /* display: inline-block; */
  flex: 1;
  align-items: center;
  padding: 6px;
}
.home .rwd-table01 tr:nth-child(2n+2) td:before {
  background-color: #c1dce0;
} 
.home .rwd-table01 td:before {
  /* background-color: transparent; */
}
.home .rwd-table01 td.inline-block:before {
  display: inline-block;
}
.home .rwd-table01 td {
  text-align: left !important;
  /*border-bottom: 1px #eee solid;*/
  padding: 2px;
  display: flex;
}
.home .rwd-table01 td span {
    flex: 2;
    padding: 5px 8px;
    max-width: 100%;
    background-color: #f3f3f3;
}
.home .rwd-table01 li {
  width: inherit;
}
.home .rwd-table01 ul.h li {
  background-color:#e9edf6;
  border-bottom:none;
}
.home .rwd-table01 ul.h li:nth-child(2n+2) {
  background-color:#d6e0ec;
}
}
@media screen and (min-width: 992px) {
.home .rwd-table01 td:before {
  display: none;
}
.home .rwd-table01 th,
.home .rwd-table01 td {
  display: table-cell;
  padding: 0.25em 0.5em;
  text-align: center;
  word-break: break-all;
}
.home .rwd-table01 th:first-child,
.home .rwd-table01 td:first-child {
  padding-left: 0;
  /* word-break: inherit; */
}
.home .rwd-table01 th:last-child,
.home .rwd-table01 td:last-child {
  padding-right: 0;
}
.home .rwd-table01 th,
.home .rwd-table01 td {
  padding: 0.5em !important;
}
.home .rwd-table01 th:nth-child(1)::before {
  display: none;
}
.home .rwd-table01 th {
  position: relative;
  word-break: keep-all;
}
.home .rwd-table01 th:last-child {
  width:110px;
}
}
/*好康優惠分享*/
.share {
  position:relative;
  margin-bottom: 30px;
}
.share img {
  width:100%;
}
.share ul {
  position:relative;
  list-style-type:none;
  display:flex;
  justify-content:flex-end;
  padding:0;
}
.share li {
  display:inline-flex;
  padding:0px 4px;
}
.share li a {
  margin:auto;
  width:45px;
  height:45px;
  border-radius:100%;
  padding:6px;
  border:3px solid transparent;
}
.share li a:hover {
 border:3px solid rgb(255,255,255,50%);
}
.share li.fb a {
  background-color:#43609c;
}
.share li.fb img {
  height:27px;
}
.share li.line a {
  background-color:#4dac2c;
}
.share li.keep a {
  background-color:#db402c;
}

/*20220119mydata實名驗證*/
.ap .loginbt {
  position:relative;
  text-align:center;
}
.ap .loginbt ul {
  list-style-type:none;
  padding:0;
  margin:0 auto;
  max-width:500px;
}
.ap .loginbt li {
  padding:15px;
}
.ap .loginbt li a {
  padding:15px;
  display:block;
  border-radius:50px;
  color:#fff;
  font-size:105%;
  background-color:#007EA8;
  transition: all 200ms ease-out;
}
.ap .loginbt li a:hover {
  background-color:#00acb9;
  text-decoration:none;
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
.mydatanote {
  position:relative;
  padding:5px 15px;
  border-radius:5px;
  background-color: #fff4d1;
}
.mydatanote span {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 0; 
  border-bottom:1px solid #ccc;
}
.mydatanote span:last-child {
  border-bottom:none;
}
.mydatanote p {
  display:inline-flex;
  margin:0;
  font-weight:bold;
  align-items: center;
}
.mydatanote a {
  display:inline-block;
}
.mydatanote a.bt {
  background-color: #E03400;
  color: #FFF;
  border-radius:5px;
  padding:6px 20px;
}
.mydatanote a.info {
  color: #FF5722;
  font-size:150%;
  padding-left:5px;
  margin: 0;
}
.mydatanote a.info:hover {
  color: #01a5ae;
  background-color:transparent;
}
.mydatanote a:hover {
  text-decoration:none;
  color:#FFF;
  background-color:#ff7720;
}
.modal-header .modal-tt {
  text-align: left;
  font-weight: bold;
}
.modal-body .mydata {
  position:relative;
  padding:15px
}
.modal-body .mydata .tt {
  font-size:120%;
  text-align: left;
  margin-bottom:20px;
  font-weight: bold;
}
.modal-body .mydata ul {
  position:relative;
  margin: 0;
  text-align: left;
}
.modal-body .mydata li {
  position:relative;
  margin: 0;
  padding: 0;
  text-align: left;
  padding:5px 0;
}
.modal-body .mydata li a {
  color:#009688;
}
.modal-body .mydata li a:hover {
  text-decoration: underline;
}
.mydata-info {
  position:relative;
  padding:10px 0;
}
.mydata-info .color01 {
  background-color:#fed201;
  padding:10px;
  border-radius:5px;
  margin-bottom:10px;
  color:#000;
}
.mydata-info .color02 {
  background-color:#01a5ae;
  padding:10px;
  border-radius:5px;
  margin-bottom:10px;
  color:#fff;
}
.ap .form-row .mydatabox {
  width:100%;
}
.ap .form-row .mydatabox label {
  display:none;
}
.ap .form-row .mydatabox .btn {
  text-align: left;
}
.ap .form-row .mydatabox .btn a {
  padding:5px 20px;
  margin:0 2px;
  border-radius:50px;
  display:inline-block;
  color:#FFF;
}
.ap .form-row .mydatabox .btn a:hover {
  text-decoration:none;
  background-color:#444 !important;
}
.ap .form-row .mydatabox .btn a.color1 {
  background-color:#478500;
}
.ap .form-row .mydatabox .btn a.color2 {
  background-color:#0073D1;
}
.ap .form-row .mydatabox .btn a.color3 {
  background-color:#c64f46;
}
.ap .imdata {
  position:relative;
  display:flex;
  padding:20px;
  background-color:#eee;
  border-radius:5px;
}
.ap .imdata p {
  margin-bottom:5px;
}
.ap .imdata p.tt {
  font-weight:bold;
}
.ap .imdata img {
  max-width:200px;
  width:100%;
}
.ap .imdata .pic {
  padding-right:20px;
}
.ap .imdata a {
  display:inline-block;
  padding: 8px 20px;
  border-radius:50px;
  margin:5px;
  color:#000;
  background-color:#aee0e7;
  text-align:center;
}
.ap .imdata a:hover {
  text-decoration:none;
  background-color:#FFEB3B;
}
.ap .imdata.center {
  justify-content:center;
  flex-wrap:wrap;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.ap .imdata.center .pic {
  padding-right:20px;
  margin-bottom:20px;
  font-weight:bold;
}
.ap .imdata.center p {
  text-align:center;
  justify-content:center;
  font-size:120%;
}
.ap .imdata.center .id {
  padding:10px;
  border-radius:50px;
  color:#0067b9;
  font-weight:bold;
  background-color:#fff;
}
.ap .stepdata {
  position:relative;
}
.ap .stepdata::before {
  content:"";
  position:absolute;
  width: 70px;
  height:3px;
  display: block;
  background-color:#E03400;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ap .stepdata p {
  margin:10px 0;
}
.ap .stepdata ul {
  position:relative;
  list-style-type:none;
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
}
.ap .stepdata li {
  padding:10px 30px;
  text-align:center;
}
.ap .stepdata li span {
  width:60px;
  height:60px;
  display:block;
  padding: 14px;
  border-radius:100%;
  text-align:center;
  color:#FFF;
  font-size:140%;
  font-weight:bold;
  background-color:#E03400;
}
@media screen and (max-width: 991px) {
.mydatanote p {
  width:100%;
  display:block;
}
.mydatanote a {
  margin:10px auto;
}
}
@media screen and (max-width: 575px) {
.ap .imdata {
  flex-wrap:wrap;
}
.ap .imdata .pic {
  margin:auto;
}
}
@media screen and (max-width: 500px) {
.ap .imdata a {
  display:block;
  margin: 10px 0;
}
}
/*20220413修改*/
.ap .subtts {
  font-size:105%;
  font-weight: bold;
  margin-bottom: 5px;
}


.ap .formbox {
  width:60%;
  margin:auto;
}
.ap .form-row .con {
  position:relative;
  margin-top: 28px !important;
  display:flex;
}
.ap .form-row .con .captchaAudio {
  width: 100%;
}
.ap .form-row .con Audio {
  width:100%;
  height: 40px;
}
.ap .form-row .con a {
    display: inline-flex;
    background-color: #6dc8de;
    border-radius: 4px;
    padding: 10px 12px;
    color: #fff;
    margin-left: 10px;
}
.ap .form-row .con a:hover {
    background-color: #00a5ac;
}
@media screen and (max-width: 991px) {
.ap .formbox {
  width:100%;
}
}
@media screen and (max-width: 767px) {
.ap .form-row .con {
  margin-top: 10px !important;
}
.ap .step div {
  width: 45%;
}
}

/*20220718手動發票登錄*/
.ap .billbox {
  width: 70%;
  margin:auto;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgb(0,0,0,0.3);
  padding: 15px;
}
.ap .billbox .nav-tabs {
  background-color: #008cbc;
  border-radius: 10px;
  border: 2px solid #008cbc;
  overflow:hidden;
}
.ap .billbox .nav-tabs .nav-item {
  width:50%;
  text-align:center;
  position:relative;
  align-items: stretch;
  display: flex;
}
.ap .billbox .nav-tabs .nav-item .nav-link {
  width:100%;
}
.ap .billbox .nav-tabs .nav-item.show .nav-link,
.ap .billbox .nav-tabs .nav-link.active {
  background-color: #008cbc !important;
  color:#FFF;
  padding: 10px 5px;
  position:
  relative;
}
.ap .billbox .nav-tabs .nav-link {
  padding: 10px 5px;
  color: #008cbc;
  border-radius:0;
  border: none;
  background-color:#FFF;
}
.ap .billbox .nav-tabs .nav-link:focus {
  outline-offset:-3px;
}
.ap .billbox .tab-content {
  padding:20px;
}
.ap .billbox .tab-content p {
  text-align: center;
  margin-bottom:10px;
}
.ap .billbox .tab-content p.t01 {
  font-size:120%;
  font-weight: bold;
}
.ap .billbox .tab-content p.t02 {
  color: #995f4d;
}
.ap .formkeyin {
  position:relative;
}
.ap .formkeyin ul {
  list-style-type:none;
  padding:0;
  margin:0;
}
.ap .formkeyin li {
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items: stretch;
  border-bottom:1px solid #ddd;
  padding: 5px;
}
.ap .formkeyin li:last-child {
  border-bottom:none;
}
.ap .formkeyin .form-control,
.ap .formkeyin .custom-select {
  border-color:#5197a1;
  width: 100%;
  border-radius:6px;
}
.ap .formkeyin .b_l {
  width: 30%;
  color:#14353a;
  font-weight:bold;
  padding:10px;
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
.ap .formkeyin .b_r {
  width: 70%;
  padding:10px;
  background-color:#fff;
  display: flex;
  flex-wrap:wrap;
}
.ap .formkeyin .b_r .form-row {
  margin:0;
}
.ap .formkeyin .b_r .custom-control {
  margin-right:20px;
}
.ap .formkeyin .b_l .req {
  color:#9a0000;
  padding-left:4px;
}
.ap .formkeyin .b_l label {
  margin:0;
}
.ap .formkeyin .b_r input[type=button] {
    text-indent: -9999px;
    background-image: url(../images/ap/num_re.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 36px;
    height:36px;
    margin-left:5px;
    background-color: transparent;
    border: none;
    transition: all 200ms ease-out;
}
.ap .formkeyin .b_r input[type=button]:hover {
  opacity:0.5;
}
.ap .formkeyin .b_r .note {
  font-size:95%;
  color:#555;
  margin-top:5px;
  padding: 0;
  background-color: transparent;
}
.ap .formkeyin .date {
  padding:5px 10px;
}
.ap .formkeyin .box {
  padding:15px 0;
}
.ap .formkeyin .b_r .num {
  display:flex;
  width: 100%;
}
.ap .formkeyin .b_r .num .form-control {
  width:100%;
}
.ap .formkeyin .b_r.number label {
  display:none;
}
.ap .formkeyin .b_r.number .num_l {
  padding:0 5px 0 0;
  float:left;
  width: 20%;
}
.ap .formkeyin .b_r.number .num_r {
  width: 80%;
}
.modal-body.random {
  margin:auto;
  padding:20px;
}
.modal-body.random img {
  width:100%;
  max-width:300px;
  border:1px solid #ccc;
  border-radius: 10px;
}
@media screen and (max-width: 991px) {
.ap .billbox {
  width:100%;
}
.ap .formkeyin .b_l {
  width: 30%;
}
.ap .formkeyin .b_r {
  width: 70%;
}
.ap .formkeyin .b_r .num {
  width:60%;
}
.ap .formkeyin .b_r .captchaAudio {
  width:40%;
}
}
@media screen and (max-width: 767px) {
.ap .formkeyin .b_l,
.ap .formkeyin .b_r {
  width: 100%;
  padding:5px 0;
}
.ap .formkeyin .b_l {
  justify-content:inherit;
}
.ap .formkeyin li {
  padding:5px 0;
}
.ap .formkeyin .form-control,
.ap .formkeyin .custom-select {
  width: 100%;
}
.ap .formkeyin .b_r .num {
  width:100%;
}
}
@media screen and (max-width: 480px) {
.ap .billbox .tab-content p.t01 {
  margin:10px 0;
}
.ap .billbox .tab-content p.t02 {
  font-size:90%;
}
.ap .billbox .tab-content {
  padding:0px;
}
}
/*發票記錄查詢*/
.ap .billtotal {
  font-size:110%;
  font-weight: bold;
  padding: 5px 15px;
  background-color:#fff48f;
  border-radius: 5px;
  text-align: right;
}
.ap .billtotal p {
  display:inline-block;
  padding:0 4px;
  color:#f00;
  margin:0;
  font-size:140%;
}
.ap .bill_list {
  position:relative;
  margin: 15px 0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0,0,0,0.2);
  overflow: hidden;
}
.ap .bill_list p {
  margin:0;
}
.ap .bill_list ul {
  position:relative;
  list-style-type:none;
  padding:0;
  margin:0;
}
.ap .bill_list li {
  position:relative;
  padding:10px;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  background-color:#fff;
  border-bottom:1px solid #ddd;
  text-align: center;
}
.ap .bill_list li.title {
  background-color:#eee;
  font-size:105%;
  font-weight:bold;
}
.ap .bill_list li.nodata {
  justify-content: center;
  color:#00838f;
}
.ap .bill_list li .list_l {
  width:80%;
  display:flex;
  align-items: center;
}
.ap .bill_list li .list_r {
  width:20%;
}
.ap .bill_list li .list_l div {
  width:50%;
  display:flex;
  align-items: center;
}
.ap .bill_list li .list_l div .bill01,
.ap .bill_list li .list_l div .bill02,
.ap .bill_list li .list_l div .bill03,
.ap .bill_list li .list_l div .bill04 {
  width:50%;
}
.ap .bill_list li .list_r.cash {
  display:flex;
  align-items: center;
  justify-content: flex-end;
  position:relative;
  padding-right:40px;
}
.ap .bill_list li .list_r p.a01 {
  font-size: 105%;
  font-weight:bold;
}
.ap .bill_list li .list_r p.a02 {
  display:inline-block;
  padding: 1px 7px;
  color:#fff;
  background-color:#f00;
  font-size: 80%;
  border-radius: 50px;
  margin-left: 5px;
  position:absolute;
  right:0;
}
@media screen and (max-width: 767px) {
.ap .bill_list {
  box-shadow:none;
padding: 10px;margin: 0;}
.ap .bill_list li {
  border-radius: 5px;
  border: none;
  box-shadow: 0 0 6px rgb(0 0 0 / 20%);
  margin-bottom:10px;
}
.ap .bill_list li.title {
  display:none;
}
.ap .bill_list li .list_l {
  width:60%;
  display: block;
  text-align: left;
}
.ap .bill_list li .list_r {
  width:40%;
}
.ap .bill_list li .list_l div {
  width:100%;
  display:block;
}
.ap .bill_list li .list_l div .bill01,
.ap .bill_list li .list_l div .bill02,
.ap .bill_list li .list_l div .bill03,
.ap .bill_list li .list_l div .bill04 {
  width: initial;
  display:inline-block;
}
.ap .bill_list li .list_l div .bill02 {
  font-size: 80%;
  padding:1px 5px;
  color:#FFF;
  background-color:#607D8B;
  border-radius: 2px;
}
.ap .bill_list li .list_l div .bill03 {
  font-weight:bold;
}
.ap .bill_list li .list_l div .bill04 {
  display:none;
}
}
/*抽獎券查詢*/
.ap .tk_list {
  position:relative;
  margin: 15px 0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0,0,0,0.2);
  overflow: hidden;
}
.ap .tk_list p {
  margin:0;
}
.ap .tk_list ul {
  position:relative;
  list-style-type:none;
  padding:0;
  margin:0;
}
.ap .tk_list li {
  position:relative;
  padding:10px;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  background-color:#fff;
  border-bottom:1px solid #ddd;
  text-align: center;
}
.ap .tk_list li.title {
  background-color:#eee;
  font-size:105%;
  font-weight:bold;
}
.ap .tk_list li p {
  width:25%;
}
.ap .tk_list li a b {
  display:none;
}
.ap .tk_list li a {
  font-size:120%;
  color:#00838f;
  transition: all 200ms ease-out;
  display:inline-block;
}
.ap .tk_list li a:hover {
  text-decoration:none;
  -moz-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  -o-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
}
@media screen and (max-width: 480px) {
.ap .tk_list li p:last-child {
  display:none;
}
.ap .tk_list li p {
  width:33.333%;
}
}
.modal-title {
  font-weight: bold;
  font-size: 120%;
}
.modal-body .tk {
  position:
  relative;
  padding:10px;
}
.modal-body .tk ul {
  position:relative;
  list-style-type:none;
  padding:0;
  margin:0;
}
.modal-body .tk li {
  padding:10px;
  border-radius: 8px;
  box-shadow: 0 0 6px rgb(0,0,0,0.2);
  margin-bottom:15px;
}
.modal-body .tk li:last-child {
  margin-bottom:0;
}
.modal-body .tk li p {
  margin-bottom:3px;
  font-size: initial;
  font-weight: inherit;
}
.modal-body .tk li p:nth-child(2) {
  color:#286f91;
}
.modal-body .tk li span p {
  display:inline-block;
}
.modal-body .tk li span p.sort {
  font-size: 80%;
  padding:1px 5px;
  color:#FFF;
  background-color:#607D8B;
  border-radius: 2px;
  margin-left:5px;
}
/*編輯器內容*/
body.home .ap .detail .edit .subtt01 {
  display: block;
  padding: 5px 5px 5px 20px;
  color: #000;
  font-weight:bold;
  font-size: 125%;
  position:relative;
  margin: 0;
}
body.home .ap .detail .edit .subtt01:before {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-top: solid 6px transparent;
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  border-left: solid 7px #ea5514;
  background-color: transparent;
  top: 50%;
  left: 12px;
  transform:translate(-50%,-50%);
}
body.home .ap .detail .edit .qrimg {
  padding:0 30px;
}
body.home .ap .detail .edit .qrimg img {
  max-width:100%;
  width:auto;
}
body.home .ap .detail .edit .qrimg .qrpic {
  text-align:center;
}
body.home .ap .detail .edit .qrimg .tt01 {
  font-size:120%;
  font-weight:bold;
}
body.home .ap .detail .edit .txt .bt {
  padding-top:20px;
  text-align:center;
  border-top:1px solid #ccc;
  margin-top:10px;
}
body.home .ap .detail .edit .txt .bt svg {
  margin-right:10px;
}
body.home .ap .detail .edit .txt .bt a {
  display: inline-flex;
  background-color:#0e538a;
  color:#FFF;
  padding:8px 20px;
  align-items: center;
}
body.home .ap .detail .edit .txt .bt a:hover {
  text-decoration:none;
  background-color:#383635;
}
@media screen and (max-width: 767px) {
body.home .ap .detail .edit .qrimg img {
  max-width:180px;
}
}
.ap .video-container {
  position: relative;
  padding-bottom: 55%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  /* max-width: 1000px; */
  margin: auto;
}
.ap .video-container iframe,
.ap .video-container object,
.ap .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:2;
}
.ap .video p  {
  display: block;
  padding:10px;
  text-align:center;
}
.ap .video {
  margin-top:30px;
}
.ap .video .container {
  padding:0 10%;
}
@media screen and (max-width: 991px) {
.ap .video-container {
  padding-bottom: 50%;
}
.ap .video>div {
  padding:10px 0;
}
.ap .video {
  margin-top:20px;
}
.ap .video .container {
  padding:0 5px;
}
}
/*內頁影音*/
.ap .list_video {
  position:relative;
  margin-bottom:20px;
}
.ap .list_video img {
  width:100%;
}
.ap .list_video ul {
  position:relative;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.ap .list_video li {
  padding:15px;
  width: 50%;
}
.ap .list_video li a {
  display:block;
  position:relative;
  border-radius: 10px;
  overflow: hidden;
  -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
}
.ap .list_video li  a:hover {
  text-decoration: none;
}
.ap .list_video li  a:focus {
  outline-offset: inherit;
}
.ap .list_video li p {
  margin: 0;
  padding: 15px;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.ap .list_video li .pic {
  position:relative;
}
.ap .list_video li .pic .play {
  background-color: #000;
  width: 100%;
  height: 100%;
  background-image: url(../images/index/icon_play.png);
  background-position: center;
  background-repeat: no-repeat;
  transition: all 200ms ease-out;
  opacity: 0;
  position:absolute;
  z-index:1;
}
.ap .list_video li  a:hover .pic .play {
  opacity: 0.5;
}
@media screen and (max-width: 480px) {
.ap .list_video li {
  width: 100%;
}
.ap .list_video li p {
  white-space: inherit;
}
}
/*20240527 登入增加頁籤*/
.ap .loginform select {
  height:44px;
  background-color:#e8f0f3;
  border:none;
}
.ap .loginform .nav-tabs {
  background-color: #008cbc;
  border-radius: 10px;
  border: 2px solid #008cbc;
  overflow:hidden;
  margin-bottom:15px;
}
.ap .loginform .nav-tabs .nav-item {
  width:50%;
  text-align:center;
  position:relative;
  align-items: stretch;
  display: flex;
}
.ap .loginform .nav-tabs .nav-item .nav-link {
  width:100%;
}
.ap .loginform .nav-tabs .nav-item.show .nav-link,
.ap .loginform .nav-tabs .nav-link.active {
  background-color: #008cbc !important;
  color:#FFF;
  padding: 10px 5px;
  position:
  relative;
}
.ap .loginform .nav-tabs .nav-link {
  padding: 10px 5px;
  color: #008cbc;
  border-radius:0;
  border: none;
  background-color:#FFF;
}
.ap .loginform .nav-tabs .nav-link:focus {
  outline-offset:-3px;
}
/*20240815多語系*/
.lg-list {
  padding:20px;
}
.lg-list > div {
  padding:5px;
  text-align:center;
}
.lg-list a {
  width:100%;
  display:block;
  background-color:#00a9e4;
  padding:10px;
  border-radius:5px;
  color:#FFF;
  text-decoration:none;
}
.lg-list a:hover {
  background-color:#2175c3;
}
/*我的卡片滑動*/
.mycardlist {
  position:relative;
  max-width:500px;
  margin:auto;
}
.mycardlist > div {
  position:relative;
  margin:auto;
  text-align:center;
  padding: 0 !important;
}
.mycardlist img {
  width: 100%;
}
.mycardlist .mycard {
  position: relative;
  /* margin-bottom: 20px; */
  padding: 20px;
  width:100%;
  text-align:center;
}
.mycardlist .mycard img {
  max-width: 400px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 0 12px hsla(0, 0%, 0%, 0.38);
}
.mycardlist .qrcode01, .mycardlist .qrcode02 {
  padding: 20px;
  width:100%;
  text-align:center;
}
.mycardlist .qrcode01 img {
  max-width: 180px;
  margin:auto;
}
.mycardlist .qrcode02 img {
  max-width: 280px;
  margin:auto;
}
.mycardlist .qrcode01 .time {
  display: flex;
  background-color: #e8f0f3;
  padding: 5px 10px;
  border-radius: 5px;
  justify-content: center;
  width: 180px;
  margin: 10px auto;
}
.mycardlist .qrcode01 .time img {
  width: 15px;
  margin-left: 10px !important;
  margin: initial;
}
.mycardlist .qrcode02 {
  flex-wrap:wrap;
  justify-content:center;
}
.mycardlist .qrcode02 .barcode {
  width:100%;
  text-align:center;
}
.mycardlist .slick-prev,
.mycardlist .slick-next {
  width: 46px;
  height: 46px;
  z-index: 1;
  top: 20%;
}
.mycardlist .slick-next {
  right: -20px;
}
.mycardlist .slick-prev {
  left: -20px;
}
.mycardlist .slick-prev:before{
  background-image: url("../images/svg/a_l.svg")
}
.mycardlist .slick-next:before{
  background-image: url("../images/svg/a_r.svg")
  }
.mycardlist .slick-prev:before,
.mycardlist .slick-next:before{
  content:"";
  width: 46px;
  height: 46px;
  display: block;
  opacity: 0.6;
}
.mycardlist .slick-dots li button:before {
  content:"";
  width:10px;
  height:10px;
  border-radius:50px;
  background-color: #00a9e4;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 200ms ease-out;
}
.mycardlist .slick-dots li.slick-active button:before {
  content:"";
  width:30px;
  height:10px;
  border-radius:50px;
  background-color:#00a9e4;
  opacity: 1;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 580px) {
.mycardlist .slick-next {
  right: -10px;
}
.mycardlist .slick-prev {
  left: -10px;
}
}
/*我的訂閱*/
.ap .tab-box {
  position:relative;
}
.ap .tab-box .nav-tabs {
  background-color: #008cbc;
  border-radius: 10px;
  border: 2px solid #008cbc;
  overflow:hidden;
  margin-bottom: 20px;
}
.ap .tab-box .nav-tabs .nav-item {
  width:50%;
  text-align:center;
  position:relative;
  align-items: stretch;
  display: flex;
}
.ap .tab-box .nav-tabs .nav-item .nav-link {
  width:100%;
  font-size: 110%;
}
.ap .tab-box .nav-tabs .nav-item.show .nav-link,
.ap .tab-box .nav-tabs .nav-link.active {
  background-color: #008cbc !important;
  color:#FFF;
  padding: 10px 5px;
  position:
  relative;
}
.ap .tab-box .nav-tabs .nav-link {
  padding: 10px 5px;
  color: #008cbc;
  border-radius:0;
  border: none;
  background-color:#FFF;
}
.ap .tab-box .nav-tabs .nav-link:focus {
  outline-offset:-3px;
}
/*google login*/
.nsm7Bb-HzV7m-LgbsSe.hJDwNd-SxQuSe.i5vt6e-Ia7Qfc.uaxL4e-RbRzK:focus {
    outline: 3px #f00 dotted !important;
}