@charset "utf-8";
/* CSS Document */
/*共用*/

h3 {
    font-weight: bold;
    color: #000;
    font-size: 130%;
    letter-spacing: 0;
    margin: 0;
}

h3 .icon {
    display: inline-block;
    width: 40px;
    text-align: center;
    margin: 0 5px 0 0;
}

h3 .icon img {
    max-height: 40px;
}

.txt01 {
    color: #000;
    line-height: 160%;
}
.r_link {
    color: #B6203A;
    text-decoration: underline;
}
.custom_title01{
    border-bottom: 1px #837377 solid;
    padding: 5px 0 5px 5px;
    margin: 0 0 5px 0;
}

.custom_title01 p {
}
.mycard.min-h-auto {
    min-height: auto;
}
.content {
    position: relative;
}


.center_box {
    height: 100%;
}

/* 自訂下拉*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: #fff;
}

.select-selected.select-arrow-active {
    background-color: #f5f5f5;
}

.select-selected:after {
  position: absolute;
  content: "";
  top: 57%;
  right: 19px;
  width: 0;
  height: 0;
  border-right: solid 5px transparent;
  border-left: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-top: solid 7px #373737;
  transform: translate(0, -50%);
}

.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 43%;
  border-right: solid 5px transparent;
  border-left: solid 5px transparent;
  border-top: solid 5px transparent;
  border-bottom: solid 7px #373737;
}

.select-items div,.select-selected {
  padding: 10px 35px 10px 15px;
  border: 1px solid #ddd;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  letter-spacing: 0.01rem;
}

.select-items {
  position: absolute;
  background-color: #f5f5f5;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: #FFEB3B;
}
/*bread*/
.bread {
    position: relative;
    letter-spacing: 0;
}


.bread a#accesskey {
    position: absolute;
    left: 0;
    color: #555;
    top: 14px;
    letter-spacing: 0;
}
.bread .breadcrumb {
    background-color: transparent;
    padding: 0.7rem 1rem 0.7rem 0;
    margin: 0;
    color: #B6203A;
    font-size: 95%;
}
.bread .breadcrumb .breadcrumb-item a {
    color: #B6203A;
    text-decoration: none;
}

.bread .breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}

.bread .breadcrumb .breadcrumb-item img {
    width: 20px;
    margin: -4px 5px 0 5px;
}
.bread .breadcrumb .breadcrumb-item.active {
    color: #B6203A;
    font-weight: bold;
}

.bread .breadcrumb-item+.breadcrumb-item::before {
    color: #B6203A;
}

/*content*/
.main {
    position: relative;
}
@media (max-width: 992px) {
.main{
    margin-top: 60px;
}
}

/*title*/
.btitle {
        color: #000;
        font-size: 180%;
        font-weight: bold;
        letter-spacing: 0.1rem;
  }



/*plug*/
.plug_box {
    text-align: right;
}

.plug_box ul {list-style-type: none;padding: 0;margin: 0;display: inline-block;}

.plug_box ul li {
    float: left;
    padding: 2px;
}

.plug_box ul li a {
    display: block;
    border-radius: 50px;
    width: 35px;
    height: 40px;
    position: relative;
}

.plug_box ul li a:hover {
    background-color: #FFED61;
}


.plug_box ul li a img {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*app下載*/
.app_download {
    background-color: #FF9FA3;
}

.app_download.page {
    background-color: transparent;
}
.app_download .software .store {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}

.app_download .software .store li {
    padding: 5px 5px 5px 0;
}

.app_download .software .store li a {
    display: block;
    max-width: 230px;
}
@media (min-width: 992px) {
.app_download {
    padding: 0 0 0 0;
}
.app_download .container {
    max-width: 1200px;
}

.app_download.page .container {
    -webkit-align-items: flex-end;
    align-items:flex-end;
}
.app_download .software .btitle {
    padding: 60px 0 0 0;
}

.app_download.page .software .btitle {
    padding: 0 0 30px 0;
}
.app_download .software {
    display: -webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    margin: 0 0 60px 0;
    width: 100%;
}

.app_download.page .software {
    display: inline-block;
}
.app_download .software .store {
    padding: 0 45px 0 0;
    margin: 0 45px 0 0;
}

.app_download .software .store::after {
    position: absolute;
    content: "";
    width: 1px;
    top: 0;
    bottom: 0;
    background-color: #555;
    right: 0;
}
    
}
@media (max-width: 992px) {
    .app_download{
    padding: 30px 0;
}
    .app_download .iphone {
    display: none;
}

.app_download.page .iphone {
    display: block;
}
    .app_download .software .qr,.app_download .software .store::after {
    display: none;
}
.app_download.page .container {
    text-align: center;
}
.app_download .software .store{display: flex;}
    .app_download.page .software {
    display: inline-block;
    margin: auto;
    text-align: left;
}
}
/*加入桃園市民卡特店計畫*/
.project {
    max-width: 1110px;
    margin: auto;
}
.project .project_txt {
    font-size: 115%;
    font-weight: bold;
}
@media (min-width: 992px) {
    .project {
    padding: 95px 50px 65px 50px;
}
}
@media (max-width: 992px) {
        .project {
    padding: 30px 0 0 0;
}

.project .pic {
    display: none;
}
}

/*市民卡簡介*/
.intro_txt01,.intro_txt02 {
    font-size: 105%;
    line-height: 150%;
    margin: 0 0 5px 0;
}

.intro_txt01,.intro_txt01 a {
    color: #745859;
}

.intro_txt01 .ic_map {
    width: 13px;
    margin: -4px 3px 0 0;
}

.intro_txt01 a:hover {
    text-decoration: underline;
}

.intro_txt02 {
    color: #000;
}
.intro_title {
    font-weight: bold;
    font-size: 125%;
    color: #000;
    margin: 0 0 5px 0;
}
.intro_list02 ul {
    color: #745859;
    line-height: 160%;
}


.all_card {
    background-color: #ffcbcc;
    padding: 5px 0 35px 0;
}

.all_card .place {
    margin: 0;
}

.all_card .place .item .card-body {
    padding: 0;
}

.all_card .place .item.nobg {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.all_card .card_container {
    max-width: 1300px;
    margin: auto;
    position: relative;
}

.all_card .card_container {}

.all_card .card-body .card_container {
    padding: 0 20px;
}
.card_slider {
    padding: 15px 0 35px 0;
}
.place .card_slider .item {
    padding: 10px 10px 35px 10px;
}
.place .card_slider .slick-track {
    display: -webkit-flex;
    display: flex;
}
.place .card_slider .slick-slide {
    float: none;
    height: auto;
}

.place .card_slider .item .pic {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding-top: 65%;
}

.place .card_slider .item .stitle {
    color: #390720;
    font-weight: bold;
    font-size: 120%;
    margin: 10px 0 5px 0;
}

.place .card_slider .item .info {
    color: #000;
    font-weight: bold;
    margin: 0 0 5px 0;
}

.place .card_slider .item .more {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.place .card_slider .item .more a {
    color: #8A0023;
    position: relative;
}

.place .card_slider .item .more a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: solid 2px #8A0023;
    border-right: solid 2px #8A0023;
    -webkit-transform: rotate(45deg) translate(-70%, 0);
    transform: rotate(45deg) translate(-70%, 0);
    display: block;
    position: absolute;
    right: -18px;
    top: 50%;
}

.place .card_slider .item .list ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.place .card_slider .item .list ul li {
    padding: 3px 0;
    color: #837377;
}

.place .card_slider .item .pic img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 200ms ease-out 0s;
}

.intro_list01 ul,.intro_list01 li a{
    color: #B6203A;
}

.intro_list01 ul {
    font-size: 105%;
}

.intro_list01 li a:hover {
    text-decoration: underline;
}

.intro_list01 ul li {
    padding: 4px 0;
}
.intro_list02 {font-size: 105%;}

.intro_list02 li {
    padding: 3px 0;
    line-height: 150%;
}
.intro_list03 ul li {
    font-size: 115%;
    font-weight: bold;
    padding: 3px 0;
}

.card_intro li a, .card_brief li a {
    color: #b6203a;
    text-decoration: underline;
}

.card_intro li a:hover, .card_brief li a:hover {
    color: #8a0023;
}

li.no_style{
    list-style-type: none;
    margin: 0 0 0 -1.5rem;
}

.intro_list03 ul li li {
    font-weight: normal;
    font-size: 95%;
}
.color01 {
    color: #B06000;
}
.all_card .slick-next,.all_card .slick-prev{background-color: #8A0023 !important;top: 40%;width: 40px;height: 40px;}
@media (min-width: 992px) {
.all_card {
    margin-top: -50px;
}
.pic_card {
    max-width: 350px;
}
.all_card .slick-next {
    right: 10%;    
}

.all_card .slick-prev {
    left: 10%;
}
}

@media (max-width: 992px) {
    .all_card .slick-next {
    right: 5px;
}

.all_card .slick-prev {
    left: 5px;
}
}
@media (max-width: 480px) {
.place .card_slider .slick-slide {
    padding: 0 35px !important;
}
}
/*卡片種類*/
.card_brief {
    padding: 0 16px;
    margin: 0 0 20px 0;
}

.card_brief .wbox {
    border-radius: 12px;
    padding: 20px;
    background-color: #fff;
}

.card_brief .wbox .card_content {padding: 10px 0 0 0;}

.card_brief .card_content .pic_card img {
    border-radius: 10px;
}
.help a {
    color: #b6203a;
    text-decoration: underline;
}

.help a:hover {
    color: #8a0023;
}

.help {
    padding: 0 0 0 10px;
}

.help img {
    margin: -4px 5px 0 0;
}
.intro_download img {
    height: 17px;
    margin: -3px 4px 0 0;
}

.intro_download a {
    color: #b6203a;
    display: inline-block;
    text-decoration: underline;
}

.intro_download a:hover {
    color: #8a0023;
}
/*錨點選項*/
.site {
    position: absolute;
    top: -200px;
}
.anchor_menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    text-align: center;
    border-bottom: 2px #837377 solid;
}

.anchor_menu ul li a {
    display: block;
    padding: 10px 20px;
    color: #837377;
    font-size: 120%;
    position: relative;
}

.anchor_menu ul li a:hover,.anchor_menu ul li a:focus {
    color: #2E0006;
}

.anchor_menu ul li a:hover::after,.anchor_menu ul li a:focus::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #FF717C;
    display: block;
    left: 0;
    bottom: 0;
}

.anchor_menu {
    padding: 10px 15px 25px 15px;
}
/*彈出視窗*/
.card_modal .panel .wbox{padding: 0 15px;}
.card_modal .panel .wbox .title {
    font-size: 150%;
    font-weight: bold;
    color: #000;
}

.card_modal .panel .intro_table th, .card_modal .panel .intro_table td {
    border: 1px #a3a3a3 solid;
}
.card_modal .panel .intro_table td::before{
    display: none;
}
@media (max-width:768px) {
    .card_modal .panel .intro_table th, .card_modal .panel .intro_table td{
    width: 100%;
    display: block;
    border: none;
    line-height: 160%;
}
}
/*數位市民碼，桃園生活更便利*/
.digital01 {
    padding: 0 15px;
}
.digital .d_title {
    font-size: 220%;
    font-weight: bold;
}

.digital01 .d_title, .digital03 .d_title {
    color: #8A0023;
}

.digital02 .d_title {
    color: #000;
}

.digital .d_stitle {
    font-size: 130%;
    font-weight: bold;
}

.digital01 .d_stitle,.digital03 .d_stitle {
    color: #B6203A;
}

.digital02 .d_stitle {
    color: #000;
}

.digital .d_txt01 {
    color: #000;
    font-size: 105%;
    line-height: 160%;
}
.digital .d_list01 ul {
    font-size: 105%;
    line-height: 160%;
    color: #000;
}

.digital .d_list01 ul li {
    padding: 0 0 5px 0;
}
.digital_info .expect {
    background-color: #fff;
    border-radius: 50px;
    padding: 7px 15px;
    display: inline-block;
    margin: -10px 0 10px 0;
    color: #000;
}

.digital03 .digital_info .expect {
    background-color: #FFBD87;
}
.digital_pic {
    position: relative;
    text-align: center;
}

.digital_pic.pic02 img {
    max-height: 480px;
}

.digital_pic .note {
    text-align: center;
    width: 100%;
}

.digital02 .digital_pic .note {
    padding: 10px 25% 0 0;
    color: #000;
}

.digital_pic.pic01 .note {
    color: #837377;
}

.digital_pic .note.last {
    position: absolute;
    right: 59%;
    padding: 0 !important;
    top: 68%;
    left: 5%;
    width: auto;
}

.digital03 .digital_pic.pic01 .note {
    padding: 0 45% 15px 0;
}
.digital02 {
    background-color: #FF9FA3;
    border-radius: 12px;
    padding: 45px 10%;
}

.digital03 {
    padding: 45px 20px;
}

.digital04 {
    padding: 45px 20px;
}

.digital04 .grade {
    padding: 10px;
}

.digital04 .grade .wbox {
    background-color: #fff;
    border-radius: 20px;
    padding: 6% 6% 0 6%;
}

.digital04 .d_title {
    text-align: center;
    color: #8A0023;
}

.digital04 .d_stitle {
    font-size: 150%;
}
.digital04 .undone {
    background-color: #ffb47b;
    border-radius: 50px;
    padding: 5px 10px;
    font-size: 90%;
    color: #000;
    display: inline-block;
    letter-spacing: 0;
}
@media (min-width:992px) {
    .digital_pic.pic02 {
    text-align: left;
}
}