@charset "utf-8";
/* CSS Document */
/*20230605新增*/
/*------標題/內文-----*/
.ap .edit p.title {
    font-size: 140%;
    font-weight: 600;
    margin-bottom: 10px;
}
.ap .edit p.text {
    font-size: 100%;
    margin-bottom: 10px;
}

/*內文ul li*/
.ap .edit ul {
    padding: 0 0 0 30px;
}
.ap .edit li {
    padding: 2px;
    list-style-type: inherit;
}
.ap .edit li.number {
    list-style-type: decimal;
}
.ap .edit li.none {
    list-style-type: none;
}
.ap .edit ul li ul li{
    list-style-type: inherit;
}

/*內文文字顏色備註*/
.ap .edit span.blue {
    color: #4662ad;
    font-weight: bold;
}
.ap .edit span.red {
    color: #e95550;
    font-weight: bold;
}

/*表格*/
.home .tabbox {
    margin-bottom: 40px;
}

/*錨點*/
.ap .anchor {
    position: relative;
    margin-bottom: 50px;
}
.ap .anchor ul {
    list-style-type: none;
    padding: 0;
    text-align: left;
}
.ap .anchor li {
    display: inline-block;
    padding: 5px;
}
.ap .anchor li a {
    padding: 6px 15px;
    display: block;
    background-color: #dfdfdf;
    color: #000;
    text-decoration: none;
    border-radius: 50px;
    font-size: 100%;
}
/*錨點-目標定位*/
.target-fix {
    position: relative;
    top: -100px;
    display: block;
    height: 0;
    overflow: hidden;
}
/*預購定期票*/
.edit .place {
    position:relative;
}
.edit .place ul {
    display:flex;
    list-style-type:none;
    flex-wrap:wrap;
    padding:0;
}
.edit .place li {
    padding:4px;
    display:block;
}
.edit .place li a {
    border:1px solid #ccc;
    padding:4px 10px;
    display:block;
    border-radius:5px;
    color: #000;
}
.edit .place li a:hover {
    text-decoration:none;
    background-color:#fff6ab;
    color:#000;
}
.edit .pic img {
    width:100%;
}
.edit .text-info {
    display:none;
}
@media screen and (max-width: 767px) {
.edit .text-info {
    display:block;
}
}
/**/
/*雙十國慶*/
.edit.ad {
  padding: 20px;
  background-color:#FFF;
  border-radius:10px;
  box-shadow:0 0 10px rgb(0 0 0 / 15%);
  margin-bottom:30px;
}
.edit.ad img {
  width:100%;
}
.edit.ad .title {
  display: block;
  padding: 12px 30px;
  border-radius:50px;
  background-color: #1f9faf;
  color: #fff;
  font-weight:bold;
  font-size:140%;
  margin: 30px 0px 10px 0;
  text-align: center;
}
.edit.ad .subtt {
  display: block;
  padding: 10px 30px;
  color: #000;
  font-weight:bold;
  font-size:140%;
}
.edit.ad .subtt01 {
  display: block;
  padding: 5px 5px 5px 20px;
  color: #000;
  font-weight:bold;
  font-size: 125%;
  position:relative;
  margin: 0;
}
.edit.ad .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%);
}
.edit.ad ul {
  list-style-type:none;
  padding: 0 30px 0 60px;
  margin: 10px 0;
  text-align: justify;
}
.edit.ad li {
  text-indent: -31px;
  padding:2px 0;
}
.edit.ad .sale {
  display:flex;
  padding:15px;
  border-radius:10px;
  margin:10px 0 20px 0;
  background-color: #f5f2fa;
}
.edit.ad .sale .st01 {
  font-size:130%;
  font-weight:bold;
  color:#0061ae;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
  margin-bottom: 10px !important;
}
.edit.ad .sale .st01 a {
  color:#432970;
}
.edit.ad .sale .st02 {
  font-size:110%;
  font-weight:bold;
  margin-bottom:10px;
}
.edit.ad .sale .pic01 {
  width:30%;
}
.edit.ad .sale .text {
  margin-left:25px;
  width:70%;
}
.edit.ad .sale ul {
  padding:0 0 0 30px !important;
}
.edit.ad .table_02 {
  width:100%;
  margin-bottom:10px;
  background-color:#FFF;
}
.edit.ad .table_02 th {
  color: #000000;
  font-weight: bold;
  background-color: #7ecdf4;
}
.edit.ad .table_02 th,
.edit.ad .table_02 td {
  padding:6px 2px;
  text-align:center;
  border:1px solid #333;
}
.edit.ad .pic-flex {
  display:flex;
  flex-wrap:wrap;
  align-items: center;
}
.edit.ad .pic-flex img {
  width:50%;
}
.edit.ad .bt001 {
  display:block;
  text-align: center;
}
.edit.ad .bt001 a {
  display:inline-block;
  padding: 10px 20px;
  background-color: #e95550;
  color: #FFF;
  border-radius: 5px;
}
.edit.ad .bt001 a:hover {
  text-decoration:none;
  background-color: #922d2a;
}
@media screen and (max-width: 991px) {
.edit.ad .sale {
  flex-wrap:wrap;
}
.edit.ad .sale .text {
  margin-left:0px;
  margin-top:15px;
}
.edit.ad .sale .pic01,
.edit.ad .sale .text {
  width:100%;
}
}
@media screen and (max-width: 767px) {
.edit.ad .pic-flex img {
  width:100%;
}
}
/*三井活動*/
.pic_list01 {
  position: relative;
  margin: 15px 0;
}
.pic_list01 > div {
  padding: 10px !important;
  position: relative;
}
.pic_list01 .box {
  position: relative;
  width: 100%;
  height:100%;
  text-align:center;
  background-color: #f6f6f6;
  border-radius:10px;
  padding:10px;
}
.pic_list01 .box .pic {
  width: 100%;
  height: 300px;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  /* padding-top: 140%; */
}
.pic_list01 .box .pic img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: initial;
}
.pic_list01 .box .info {
  padding: 10px;
  margin-top:15px;
  border-top:1px solid #000
}
.pic_list01 .box .info p {
  margin: 4px 0;
  display: block;
}
.pic_list01 .box .info .mtt {
  font-size: 105%;
  font-weight: bold;
  color: #000;
}
@media screen and (max-width: 767px) {
.pic_list01 .box .pic {
  padding-top: 80%;
  height:initial;
}
}
/*20240808*/
.pic_list02 {
  display:flex;
  align-items:center;
  justify-content:center;
}
.pic_list02 a {
  display:block;
  padding:20px;
}
.pic_list02 a:hover {
  text-decoration:none;
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}
.pic_list02 img {
  max-width:100%;
}
@media screen and (max-width: 480px) {
.pic_list02 a {
  padding:10px;
}
}
/*20241224市民限定乘車碼*/
.title-a {
  font-size: 145%;
  font-weight:bold;
  border-bottom:3px solid #5d7a87;
  text-align:center;
  padding-bottom:10px;
  color:#008099;
}
.title-b {
  font-size: 140%;
  font-weight:bold;
  border-bottom:1px solid #888888;
  display:inline-block;
}
.list-a01 ul {
  position:relative;
  display:flex;
  list-style-type:none;
  padding: 0 !important;
  justify-content: space-between;
  margin: 0;
}
.list-a01 p {
  margin:0;
}
.list-a01 ul li {
  padding: 15px !important;
  width: 100%;
  display: flex;
}
.list-a01 ul div {
  padding:15px 20px;
  background-color:#f5f5f5;
  width: 100%;
  border-radius:10px;
}
.list-a01 .tt {
  display:block;
  font-size:130%;
  font-weight:bold;
  color:#c94c4a;
}
@media screen and (max-width: 767px) {
.list-a01 ul {
  flex-wrap:wrap;
}
.list-a01 ul li {
  padding: 10px !important;
}
}
.tool {
  display:flex;
  background-color: #f5f5f5;
}
.tool p {
  margin:0;
}
.tool img {
  width:100px;
}
.tool .tt {
  display:block;
  font-size:130%;
  font-weight:bold;
}
.tool .box {
  width:100%;
  display:flex;
  padding:15px;
}
@media screen and (max-width: 991px) {
.tool {
  flex-wrap:wrap;
}
.tool img {
  width:80px;
}
}
.qrlist li {
  text-align:center;
  justify-content: center !important;
}
.qrlist img {
  max-width:80px;
  width:100%;
}
@media screen and (max-width: 767px) {
ul.qrlist {
  flex-wrap:nowrap;
}
.qrlist li {
  width:initial !important;
  font-size:85%;
  padding: 0px !important;
}
.qrlist img {
  width:60px;
}
}
.payimg {
  display:flex;
  align-items:center;
}
.payimg a {
  display:block;
}
.payimg > div {
  padding:20px;
}
.payimg img {
  max-width:100%;
}
@media screen and (max-width: 480px) {
.payimg {
  flex-wrap:wrap;
  justify-content:center;
}
}
.list-a02 {
  margin:20px 0;
}
.list-a02 p {
  margin:0;
}
.list-a02 ul {
  list-style-type:none;
  margin:0;
  padding:0 !important;
  display:flex;
}
.list-a02 li {
  width:100%;
  padding:15px !important;
  position:relative;
}
.list-a02 li .tt {
  font-size:110%;
  position:absolute;
  background-color:#FFF;
  border:2px solid #eee;
  padding:5px 15px;
  top:15px;
  left:50%;
  transform: translate(-50%, -50%);
  border-radius:50px;
}
.list-a02 li .box {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  background-color:#FFF;
  padding:30px 10px 10px 10px;
  border-radius:10px;
  border:2px solid #eee;
}
.list-a02 li .box img {
  width:70px;
}
@media screen and (max-width: 991px) {
.list-a02 ul {
  flex-wrap:wrap;
}
}
.list-a03 {
  margin:10px;
  position: relative;
}
.list-a03 p {
  margin:0;
}
.list-a03 ul {
  list-style-type:none;
  margin:0;
  padding:0 !important;
  position: relative;
}
.list-a03 ul:before {
  content:"";
  position:absolute;
  width:3px;
  height: 90%;
  background-color:#f8bf71;
  left: 30px;
  margin-top: 25px;
}
.list-a03 li {
  width:100%;
  padding: 20px !important;
  position:relative;
  display:block;
}
.list-a03 li .number {
  position:absolute;
  top:50%;
  left: 30px;
  transform: translate(-50%, -50%);
  background-color:#ffc107;
  width:40px;
  height:40px;
  border-radius:100%;
  text-align:center;
  line-height:190%;
  font-size:130%;
}
.list-a03 li .number.be {
  background-color: #ffc1bf;
}
.list-a03 li .number:before {
  content:"";
  width:20px;
  height:3px;
  background-color:#ffc107;
  position:absolute;
  transform: translate(-50%, -50%);
  top:50%;
  right: -30px;
}
.list-a03 li p {
  padding-left: 70px;
}
.list-a04 {
  margin:20px 0;
}
.list-a04 p {
  margin:0;
}
.list-a04 ul {
  list-style-type:none;
  margin:0;
  padding:0 !important;

}
.list-a04 li {
  width:100%;
  padding:15px !important;
  position:relative;
}
.list-a04 li li {
  padding:2px 0 !important;
}
.list-a04 li .tt {
  font-size:110%;
  position:absolute;
  background-color:#FFF;
  border:2px solid #eee;
  padding:5px 15px;
  top:15px;
  left:50%;
  transform: translate(-50%, -50%);
  border-radius:50px;
}
.list-a04 li .box {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  background-color:#FFF;
  padding:30px 10px 10px 10px;
  border-radius:10px;
  border:2px solid #eee;
}
.list-a04 li .box .icon {
  width:15%;
  text-align:center;
}
.list-a04 li .box .icon img {
  width:70px;
}
.list-a04 li .box .txt {
  width:85%;
}
.area-a01 {
  display:flex;
}
.area-a01 img {
  max-width:200px;
  width:100%;
}
.area-a01 .pics {
  padding:30px;
}
@media screen and (max-width: 767px) {
.area-a01 .pics {
  display:none;
}
.list-a04 li {
  padding:15px 0px !important;
}
.list-a04 li .box {
  padding:30px 15px 15px 15px;
}
.list-a04 li .box .icon {
  display:none;
}
.list-a04 li .box .txt {
  width:100%;
}
}
/*20250311*/
.edit .titletype01 {
  display: block;
  padding: 8px 30px;
  border-radius:0px;
  background-color: #1f9faf;
  color: #fff;
  font-weight:bold;
  font-size: 145%;
  margin: 30px 0px 10px 0;
  text-align: center;
}
.edit .titletype02 {
  display: block;
  padding: 5px 0;
  color: #000;
  font-weight:bold;
  font-size: 125%;
  position:relative;
  margin: 0;
}
.edit.titletype02: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 #008099;
  background-color: transparent;
  top: 50%;
  left: 12px;
  transform:translate(-50%,-50%);
}
.edit .titletype03 {
  display:inline-block;
  padding:5px 15px;
  border:1px solid #000;
}
.edit .sale {
  position:relative;
  background-color:#f1f1f1;
  padding:10px;
  border-radius:10px;
}
.edit .sale ul {
  display:flex;
  list-style-type:none;
  padding: 0;
}
.edit .sale ul p {
  margin:10px 0 0 0;
}
.edit .sale li {
  width:33.333%;
  padding:10px;
}
.edit .sale li .box {
  border-radius:15px;
  padding:15px;
  text-align:center;
  background-color:#FFF;
}
.edit .sale li img {
  height:200px;
}
.edit .sale .barcode {
  padding:20px;
  text-align:center;
}
@media screen and (max-width: 575px) {
.edit .sale ul {
  flex-wrap:wrap;
}
.edit .sale li {
  width:100%;
  padding:10px;
}
}
/**/
.piclist {
  position:relative;
  display:flex;
  flex-wrap:wrap;
}
.piclist > div {
  width:50%;
  padding:10px;
}
.piclist > div img {
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 3px solid #ddd;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
.piclist > div {
  width:100%;
}
}