body {
    font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}


#main_wrap {
    width: 100%;
}

/*kv*/
#kv,
#kv_p,
#kv_m {
    position: relative;
}

#kv {
    width: 100%;
}

#kv_p,
#kv_m {
    display: none;
}

.btn_Favorite {
    width: 13.5%;
    position: absolute;
    /* top: 61%;
    left: 35.3%; */
    top: 65%;
    left: 27%;
}

/**** 2025/2/19  promotion ****/
.promo {
    display: block;
}

.mpromo {
    display: none;
}

#promo-wrap {
    width: 100%;
}
.event_wrap {
	width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}
.bk_promo {
    background-color: #f7f7f7;
}

.promo-wrapper {

}
.title_promo {
    font-size: 2.1vw;
    font-weight: bold;
    color: #222222;
    text-align: center;
    padding-top: 3.5%;
}


/*BankList*/

.title {
    font-size: 2.1vw;
    font-weight: bold;
    color: #222222;
    text-align: center;
    margin-top: 2.5%;
}

.line {
    width: 4.5%;
    border-bottom: 4px solid #f5d941;
    margin: 1% auto;
}

#bank {
    width: 100%;
    /*border-bottom: 1px solid #e9ebed;*/
}

.bankArea {
    width: 100%;
}

.bankBox {
    width: 100%;
    padding: 2% 0;
}

.bankBox ul {
    width: 70%;
    margin: 0 15%;
    display: inline-block;
}

.bankBox ul li {
    width: 22.4%;
    margin: 1%;
    border: 1px solid #e9ebed;
    display: inline-block;
}

.bankBox ul a:hover img {
    -webkit-filter: grayscale(0%);
    /* Safari */
    filter: grayscale(0%);
    -webkit-filter: saturate(110%);
    /* Safari */
    filter: saturate(110%);
    transform: scale(1.05);
    transition: all .2s cubic-bezier(0, 0, 0.58, 0);
}


.event-wrap {
    /* font-family: futura-pt, Helvetica, Arial, sans-serif, 'Noto Serif TC'; */
    /* font-family: 'Noto Serif TC', serif; */
    font-family: futura-pt, Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei";
    width: 100%;
    height: 100%;
}

/*EventList*/
.eventArea {
    width: 100%;
    display: inline-table;
    margin-bottom: 3%;
}

.eventBox {
    width: 80%;
    margin: 0 auto;
    padding: 2% 1%;
}

.bank {
    width: 32%;
    border: 1px solid #a8a8a8;
    display: inline-table;
    margin: 1% 0.5%;
}

.bankLogo {
    width: 100%;
    padding: 8% 16% 5%;
    background-color: #ffffff;
    text-align: center;
}

.bankLogo02 {
    width: 100%;
}

.bankTag {
    width: 100%;
    text-align: center;
    margin: 4% 0 0%;
}

.propertyBox {
    display: flex;
    margin: 2% 0 0 5%;
}

.property {
    color: #fff;
    font-size: 0.9vw;
    padding: 0 2%;
    line-height: 1.75em;
    margin-right: 1%;
    background-color: #af8c5d;
}
/* 3/17 Kim */
.property2 {
    display: inline;
    color: #222222;
    /* font-size: 0.9vw; */
    padding: 1% 2%;
    line-height: 1.75em;
    margin-right: 1%;
    background-color: #f5d941;
    margin: 0 auto;
}

/*8/22 周年慶加碼 Kim */
.property3 {
    display: inline;
    color: #ffffff;
    /* font-size: 0.9vw; */
    padding: 1% 2%;
    line-height: 1.75em;
    margin-right: 1%;
    background-color: #af8c5d;
    /* background-color: #da3536; */
    margin: 0 auto;
}


.eventDate {
    width: 90%;
    padding: 2% 4% 4%;
    color: #000;
    font-size: 1vw;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #999999;
    margin: 0 auto;
}

.eventCode {
    width: 90%;
    padding: 3% 4% 3%;
    color: #000;
    font-size: 1vw;
    font-weight: bold;
    text-align: center;
    border-bottom: 0px solid #999999;
    margin: 0 auto;
	line-height: 1.5vw;
}

.eventTitle01 {
    width: 100%;
    padding: 3% 5%;
    color: #333;
    font-size: 1.5vw;
    font-weight: bold;
}

.eventTitle02 {
    width: 90%;
    color: #c19e70;
    font-size: 1.2vw;
    line-height: 1.2em;
    font-weight: bold;
    border-top: 1px solid #c19e70;
    padding: 3% 0;
    margin: 0 auto;
}

.eventTitle03,
.eventTxt {
    width: 100%;
    color: #333;
    font-size: 0.9vw;
}

.eventTitle03 {
    padding: 0 5%;
    line-height: 1.4em;
}

.eventTxt,
.eventTxt ul li,
.eventTxt ol li {
    line-height: 1.6em;
	font-size: 0.9vw;
}
.eventTxt p {
	font-size: 0.9vw;
}

.eventTxt .p-small {
    font-size: 0.8vw;
    line-height: normal;
}

.eventTxt {
    padding: 5% 3%;
}

.QRcode {
    width: 30%;
    margin: 0% 35%;
}

.eventTxt ul li {
    margin: 1% 0 1% 4%;
    list-style-type: decimal;
}
.vis_H {
    visibility: hidden;
}


.eventTxt ol {
    margin-top: 5%;
}

.eventTxt ol li {
    margin: 1% 0;
    list-style: none;
}

.actinfo {
    color:#3074ff;
    text-decoration: underline;
}

.actinfo a {
    color:#3074ff;
    text-decoration: underline;
}

.actinfo a:hover {
    color:#3074ff;
    text-decoration: none;
}


.eventBtn,
.eventBtn02 {
    width: 22%;
    text-align: center;
    font-size: 0.9vw;
    border: 0px solid #c19e70;
    color: #333;
    padding: 1% 0%;
    margin: 1% 38% 4%;
   /*  margin: 5% 38% 4%; */
    line-height: normal;
}
.eventBtn:hover {
    background-color: #ffffff;
    color: #000;
    text-decoration: underline;
}

.eventBtn img {
    width: 22%;
    vertical-align: baseline;
    float: right;
}

.more_info {
    display: inline;
}

.text-white {
    color:white;
}



/*shop*/
#shop {}

.shopArea {
    width: 100%;
    margin-bottom: 3%;
}

.shopArea ul {
    width: 81%;
    margin: 0 auto;
    padding-top: 1%;
    display: flex;
}

.shopArea ul li {
    padding: 5%;
    text-align: center;
}

.shopBoxTitle {
    font-size: 1vw;
    font-weight: bold;
    color: #333;
    display: block;
    margin: 3% 0 6%;
    text-align: center;
}

.shopBoxBtn {
    font-size: 0.9vw;
    background-color: #f5d941;
    color: #222222;
    padding: 1% 10%;
}


.shopArea a:hover img {
    filter: saturate(130%);
    transform: scale(1.05);
    transition: all .2s cubic-bezier(0, 0, 0.58, 0);
}

.shopArea a:hover .shopBoxBtn {
    background-color: #f5d941;
    border:1px #555555 solid;
    color: #222222;
    transition: all .2s cubic-bezier(0, 0, 0.58, 0);
}


/*bn*/
#banner {
    background-color: #eefaff;
    padding-top: 0.1%;
    padding-bottom: 2%
}

.moreArea {
    width: 100%;
}

.moreArea ul {
    width: 81%;
    margin: 0 auto;
    padding-top: 1%;
    display: flex;
}

.moreArea ul li {
    padding: 5%;
}




/*notice*/
.noticeArea {
    width: 100%;
    background: #ececec;
}

.note {
    text-align: center;
    padding: 2%;
    color: #999;
    font-size: 40px;
    letter-spacing: 5px;
}

/*toTop*/
.toTop-arrow {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    opacity: 0.6;
    background: #3a3551;
    color: #fff;
    cursor: pointer;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding-top: 5px;
    z-index: 1;
}

.toTop-arrow::before,
.toTop-arrow::after {
    width: 10px;
    height: 3px;
    border-radius: 5px;
    top: 10px;
    background: #fff;
    position: absolute;
    content: "";
}

.toTop-arrow::before {
    transform: rotate(-45deg) translate(0, -50%);
    left: 1.1rem;
}

.toTop-arrow::after {
    transform: rotate(45deg) translate(0, -50%);
    right: 1.1rem;
}

.toTop-arrow:focus {
    outline: none;
}






/*popup*/

/***** popup's controler *****/

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: opacity 200ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}


/***** popup's appearance *****/


/* Modal */

.pop-modal {
    background-color: rgba(0, 0, 0, .65);
    display: none;
    overflow: auto;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 10%;
}


/* Modal Content */

.modal-content,
.modal-content02 {
    position: relative;
    top: 0px;
    margin: 0 auto;
    background-color: #434343;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modal-content {
    width: 600px;
}

.modal-content02 {
    width: 450px;
}

.modal-animated-in {
    animation: totop-in .3s ease;
}

.modal-animated-out {
    animation: totop-out .3s ease forwards;
}

.modal-header,
.modal-header02 {
    width: 100%;
}

.modal-header {
    background-color: #e6e6e6;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
}

.modal-header02 {
    background-color: #253447;
    height: 195px;
    line-height: 35px;
    padding: 27px 40px;
}

.modal-content .close,
.modal-content02 .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 60px;
    color: #fff;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}

.modal-content .close {
    background-color: #7e7e7e;
}

.modal-content02 .close {
    background-color: #253447;
}

.modal-content .close:hover {
    background-color: #fff;
    color: #222;
}

.modal-header h3 {
    color: #222222;
    /*text-shadow: 1px 1px rgba(0, 0, 0, 1);*/
    font-weight: bolder;
    font-size: 20px;
}

.modal-header02 h3 {
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
}

/* Modal Body */

.modal-body {
    padding: 20px 27px 20px 20px;
    line-height: 30px;
    font-size: 15px;
    color: white;
}

.modal-body h3 {
    font-size: 18px;
}

.modal-body-inner {
    overflow-y: auto;
    height: 350px;
    padding: 0 30px 0 10px;
}

.modal-body-inner hr {
    width: 97%;
}

.modal-body-inner h3 {
    margin-bottom: 5px;
}

.modal-body-inner::-webkit-scrollbar-track {
    background-color: #777777;
}

.modal-body-inner::-webkit-scrollbar {
    width: 5px;
    background-color: white;
}

.modal-body-inner::-webkit-scrollbar-thumb {
    background-color: white;
}

.modal-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.modal-body ul li {
    position: relative;
    margin-left: 30px;
    list-style-type: decimal-leading-zero;
}

.modal-body ul li::before {
    position: absolute;
    color: #5cc560;
    left: -20px;
    top: 10px;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.modal-body a {
    color: #f5d941;
	text-decoration: underline;
}

.modal-body a:hover {
    color: #b9b9b9;
    transition: all .2s linear;
}

.modal-body-text-wrap {
    margin-bottom: 20px;
}

.modal-body-text {
    font-size: 15px;
}

.modal-body-text-wrap h5 {
    color: #ffd400;
    font-size: 15px;
}

.modal-body-text ol li {
    /* list-style: upper-alpha; */
}

.modal-body-text img {
    width: 100%;
}

/* Modal Footer */

.modal-footer {
    background-color: #656464;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
}

/*sidenav 3/31 */

.menu {
	position: fixed;
	z-index: 29;
}
.menu__style {
	background-color: rgba(255, 255, 255, 0.8); /*#de9e78cf */
    text-align: center;
    border-radius: 0px;
    border: 1px #aaaaaa solid;
}
.menu ul li {
	font-weight: bold;
	color: #333333;
	display: inline-block;
	border-bottom: 1px solid #a1a1a1;
	line-height: 2.4em;
	width: 100%;
}
.menu ul li:hover {
	color: #000000;
    background-color: #f5d941;
	/*#ffef07; */
}
/* hide sidenav 黏人精*/

#sidebar {
	transition: all 300ms linear;
}
#sidebar.active {
	right: -800px;
	/* -200px */
}
#sidebar .toggle-btn {
	position: fixed;
	/* position:absolute; */
	right: 0px;
	/* 220px */
	/* top:50px; */
	/* box-shadow: 2px 2px 2px 1px rgba(252, 93, 174, 0.3); */
	cursor: pointer;
	border-radius: 0px;
    background-color: #993333;
}
/* 收合導覽*/

#sidebar .toggle-btn span {
	display: block;
	width: 30px;
	height: 90px;
    color: #fff;
	margin: 5px 0px;
	padding: 3px 0;
	text-align: center;
    cursor: pointer;
    font-weight: 600;
	line-height: 1.1em;
}