/*******共通CSS******/
#mtkContainer,
#mtkContainer * { box-sizing: border-box; }
body {  background: url(../images/repeat_bg.jpg) top center repeat; }
#mtkContainer { padding-bottom: 40px; background: url(../images/header_pc.jpg) top center no-repeat; }
header.header { margin: 0; padding: 0; width: 100%; height: 645px; }
header h1 { display: none;}
.gobalMenu { margin-bottom: 80px;}
.gobalMenu ul { display: flex; justify-content: center; }
.gobalMenu li { display: inline-block; margin: 0 10px; width: auto; }
.gobalMenu a { position: relative; display: block; padding: 12px 25px; font: bold 30px/1 "微軟正黑體"; color: white; border:4px solid white; letter-spacing: 2px; border-radius: 99em; 
background: #092c7c; box-shadow: 0 5px 0 rgba(0,0,0,0.2); }
.gobalMenu .on a,.gobalMenu li:hover a { color: #fff200; border:4px solid #fff200; }
.gobalMenu .on a::after { content: ""; position: absolute; top: 100%; left:calc(50% - 10px); width: 1px; height: 1; border-top:10px solid transparent;
    border-right:10px solid transparent; border-bottom:10px solid transparent;border-left:20px solid #fff200; transform: rotate(90deg) translate(8px, 8px);
}



/*******首頁CSS******/
.indexH2 { margin: 0 auto 20px auto; width: 70%; max-width: 674px;}
.indexH2 img { width: 100%;}
.infor2Box { display: flex; margin: 0 auto 50px auto;  max-width: 1220px;}
.infor2Box > .infor2Box-inner { display: inline-block; flex-grow: 0; flex-shrink: 0; ; padding: 30px 10px; width: calc(50% - 10px); border-radius: 10px;
     background: white; box-shadow: 0 7px 0 rgba(255,255,255,0.5); }
.infor2Box .infor2Box-inner:nth-child(odd) { margin-right: 10px;}
.infor2Box .infor2Box-inner:nth-child(even) { margin-left: 10px;}


.infor2Box .infor2Box-inner h3 { margin-bottom: 10px;}
.infor2Box-inner-tag {  margin-bottom: 15px; text-align: center;}
.infor2Box-inner-tag span { display: inline-block; padding: 8px 10px;  min-width: 300px; font: bold 23px/1 "微軟至黑體" ; color: white;
    letter-spacing: 2px; border-radius: 99em;
    ; background: #092c7c;}
.infor2Box-inner-content { font: bold 70px/1 "微軟正黑體"; color: #f75858; text-align: center; }    
.infor2Box .underLine { position: relative; display: inline-block;}
.infor2Box .underLine::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; background: url(../images/dec-line-1.png) top center no-repeat; background-size: 100% 100%;}
.infor2Box-inner-content strong { font-size: 1.8em; line-height: 0.4em;}
.infor2Box-inner.bgInfor1 { background: url(../images/bg-infor-1.png) white top center no-repeat;}

.small2Box { display: flex;}
.small2Box-inner { width: 50%;}
.small2Box-inner-expText { padding-left: 10px; font:18px/1.7 "微軟正黑體"; color: black; letter-spacing: -1px;}
.small2Box-inner-expPhoto { padding-left: 10px; }
.small2Box-inner-expPhoto img { width: 100%;}
.small2Box { display: flex; margin-top: 20px; }
.small2Box-inner { display: inline-block; width: 50%;}

.bgInfor1 .infor2Box-inner-tag  {margin-bottom: 40px;}

.infor1Box { display: block; margin: 0 auto 100px auto;  padding: 30px 5%; width: 95%; max-width: 1220px; border-radius: 10px;
    background: white; box-shadow: 0 7px 0 rgba(255,255,255,0.5); }
.infor1Box h3 {  margin: 10px auto 10px auto; text-align: center;}
.infor1Box h3 span { position: relative; display: inline-block; padding-bottom: 10px; font:bold 47px/1 "微軟正黑體"; color: #092c7c; 
    letter-spacing: 2px;
background: url(../images/dec-h2-line.png) bottom center repeat-x;}
.infor1Box h3 span::before { content: ""; position: absolute; top: -20px; left: -70px; width: 72px; height: 75px; background: url(../images/dec-h2-c-l.png) top center no-repeat;}
.infor1Box h3 span::after { content: ""; position: absolute; top: -20px; right: -40px; width: 67px; height: 59px; background: url(../images/dec-h2-b-r.png) top center no-repeat;}
.infor1Box-inner-tag {  margin-bottom: 40px; text-align: center;}
.infor1Box-inner-tag span { display: inline-block; padding: 8px 10px;  min-width: 300px; font: bold 23px/1 "微軟至黑體" ; color: white;
    letter-spacing: 2px; border-radius: 99em;
    ; background: #092c7c;}
.infor1Box-inner-content { font: bold 70px/1 "微軟正黑體"; color: #f75858; text-align: center; }    
.infor1Box .underLine { position: relative; display: inline-block;}
.infor1Box .underLine::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; background: url(../images/dec-line-1.png) top center no-repeat; background-size: 100% 100%;}
.infor1Box-inner-content strong { font-size: 1.8em; line-height: 0.4em;}
.mWrap { display: inline-block;}


.note { padding: 0; }
.note ul { margin: 20px auto 20px auto; max-width: 500px }
.note li { margin-bottom: 15px; color: rgb(0, 0, 0);text-align: left;font: 26px / 1.6 "微軟正黑體"; list-style-type: decimal;
    list-style-position: inside;}
.note li b { font-weight: bold;}
.note li ol { margin-left: 20px;}
.note li ol li { margin-bottom: 0px; list-style-type: disc; }
.noteBtn { display: flex; margin-top: 10px; padding: 0 50px; justify-content: space-around;}
.noteBtn a { display: inline-block; padding: 10px 0; width: 45%; font:22px/1.6 "微軟正黑體"; color: #fff; text-align: center; border-radius: 99em; transition: .5s;  background: #f75858;}
.noteBtn a:hover { transform: scale(1.05);}
.noteBtn a:first-child { background: #092c7c;}

h4 { text-align: center;}
h4 span{ position: relative; display: inline-block; padding-bottom: 10px; font:bold 30px/1 "微軟正黑體"; color: #092c7c; 
    letter-spacing: 2px; text-align: center;
background: url(../images/dec-h2-line.png) bottom center repeat-x;}

.grayLine { margin: 20px auto 10px auto; width: 90%; height: 1px; border-bottom:1px solid rgba(0,0,0,.2);}

.table table { margin:  0 auto; border:1px solid rgba(0,0,0,0.07); }
.table table tr:nth-child(1) {background: #f75858;color: #fff;}
.table table tr:nth-child(1) td { color: white;}
.table tr { border-bottom: solid 5px rgba(0,0,0,0.07);}
.table tr:nth-child(even) {background: #efefef;}
.table td { padding: 10px 10px; width: auto; color: rgb(0, 0, 0);text-align: center;font: 17px / 1.6 "微軟正黑體";border-right:1px solid rgba(0,0,0,0.07);  }
.table td:nth-child(1)::after,
.table td:nth-child(2)::after,
.table td:nth-child(3)::after,
.table td:nth-child(4)::after { display: none;}

.lightBox { display: none; position: fixed; top: 0; left: 0; padding: 20px 0; width: 100%; height: 100%;  background: rgba(0,0,0,0.8); z-index: 15;  }
.lightBox-inner {margin: 0 auto; padding: 0 10px; width: 95%; max-width: 1220px;height: 90vh;overflow-y: scroll; background: white; border-radius: 20px;}
.lightBox .note li {list-style-type: circle; }
.closeBtn { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;font: 30px / 40px "arial"; cursor: pointer; text-align: center; background: rgba(255,255,255,0.8); border-radius: 99em;}


.lightBoxBank { display:none; position: fixed; top: 0; left: 0; padding: 20px 0; width: 100%; height: 100%;  background: rgba(0,0,0,0.8); z-index: 15;  }
.lightBoxBank-inner {margin: 0 auto; padding: 0 10px; width: 95%; max-width: 1400px;height: 90vh;overflow-y: scroll;  border-radius: 20px;}
.lightBoxBank ul { display: flex; flex-wrap: wrap;}
.lightBoxBank li { display: inline-block; margin: 0 1% 2% 1%; padding: 15px; width: 23%; border-radius: 20px; background: white; }
.bankName { padding: 10px 0; font: 15px/1 "微軟正黑體"; color: black; text-align: center; display: none; }
.bankLogo { display: flex; justify-content: center; height: 70px; text-align: center;}
.bankLogo img { width: 100%;}
.bankDate { padding: 10px 0; font: 20px/1 "微軟正黑體"; color: black; text-align: center;}
.bankHighLight { padding: 10px 0; font: bold 20px/1 "微軟正黑體"; color: white; text-align: center; background: #f75858; border-radius: 10px;}
.bankText { padding: 10px 0; font: 15px/1.6 "微軟正黑體"; color: black; text-align: left;}
.bankLink { display: block; margin: 0 auto; width: 80%; font: 20px/1.6 "微軟正黑體"; color: white; text-align: center;
    border-radius: 99em;; background: #092c7c; box-shadow: 0 5px 0 rgba(0,0,0,0.1); transition: .5s; }
    .bankLink:hover { transform: translateY(-5px);}
.closeBtnBank { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;font: 30px / 40px "arial"; cursor: pointer; text-align: center; background: rgba(255,255,255,0.8); border-radius: 99em;}
.lightBoxBankBtn { position: fixed; top: 70%; right: 5%; width: 150px; transition: .5s;}
.lightBoxBankBtn img { width: 100%;}
.lightBoxBankBtn a.lightBoxBankBtn-link{ position: relative; display: block; margin-top: -10px; font: 20px / 2 "微軟正黑體"; color: #fff;  text-align: center;
     border-radius: 99em;; background: #f75858; z-index: 2;}
.lightBoxBankBtn:hover { transform: translateY(-5px);}
/*******商品CSS******/
.itemMenu {  position: sticky; top: 0; z-index: 10; transition: .5s; }
.itemMenu.bg { background: white;}
.itemMenu-inner {display: flex; margin: 0 auto; padding: 0 30px; max-width: 1220px;}
.itemMenu a { display: inline-block; padding: 13px 25px; font: bold 24px/1 "arial","微軟正黑體"; color: #092c7c; border-radius: 20px 20px 0 0;
     background: rgb(219, 219, 219); transition: .5s;}
.itemMenu a:nth-child(even) { background: rgb(199, 199, 199);}
.itemMenu a.on { color: #f75858; background: white; border-top: 3px #f75858 solid;}
.itemMenu.bg a { border-radius: 0;}
.itemMenu a:hover { background: white;}

.items { display: none; margin: 0 auto 50px auto; padding: 40px 25px; width: 95%; max-width: 1220px; border-radius: 20px; background: white;}
.items.on { display: block;}
.itemsH2,
.infor2Box h3 { margin: 0 auto 30px auto; text-align: center;}
.itemsH2 span,
.infor2Box h3 span { position: relative; display: inline-block; padding-bottom: 10px; font:bold 47px/1 "微軟正黑體"; color: #092c7c; 
    letter-spacing: 2px;
background: url(../images/dec-h2-line.png) bottom center repeat-x;}
.itemsH2 span::before,
.infor2Box h3 span::before { content: ""; position: absolute; top: 0; left: -40px; width: 32px; height: 40px; background: url(../images/dec-h2-a-l.png) top center no-repeat;}
.itemsH2 span::after,
.infor2Box h3 span::after { content: ""; position: absolute; bottom: 10px; right: -50px; width: 79px; height: 75px; background: url(../images/dec-h2-a-r.png) top center no-repeat;}

.items .poi:nth-of-type(even) .itemsH2 span::before,
.infor2Box .infor2Box-inner:nth-of-type(even) h3 span::before { content: ""; position: absolute; top: -10px; left: -50px; width: 54px; height: 68px; background: url(../images/dec-h2-b-l.png) top center no-repeat;}
.items .poi:nth-of-type(even) .itemsH2 span::after,
.infor2Box .infor2Box-inner:nth-of-type(even) h3 span::after { content: ""; position: absolute; top: -20px; right: -40px; width: 67px; height: 59px; background: url(../images/dec-h2-b-r.png) top center no-repeat;}

.fixItemsBtn { position: fixed; padding: 10px; top:20%; left: 10%; width: 120px; border-radius: 10px; background: #fff; z-index: 5;}
.fixItemsBtn div { display: none;}
.fixItemsBtn div.on { display: block;}
.fixItemsBtn a { display: block; padding: 5px 0; text-align: center; font: 18px/1 "微軟正黑體"; color: #092c7c; }
.fixItemsBtn a:hover { font-weight: bold;}
/******模組POI******/
.poi { margin: 0 auto; width: 100%; max-width: 1220px; }
.ph-title,.ph-menu,.ph-group-title{ display: none;}
.ph-group { display: flex; flex-wrap: wrap; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,.2); }
.ph-group.center { justify-content: center;}
.ph-group .ph-group-content { position: relative; display: inline-block; margin: 0 1% 50px 1%; padding-bottom: 90px; width: 23%; background: white;
    transition: .5s;  box-shadow: 0 3px 8px rgba(0,0,0,0.15);}
.ph-group .ph-group-content:hover { transform: scale(0.95);}
.ph-group-content-tag { position: absolute; top:0; left: 0; padding: 5px 10px; font:15px/1 "微軟正黑體"; color: white; letter-spacing: 2px; background: #f75858;}
.ph-group .ph-group-content-photo { position: relative;}
.ph-group .ph-group-content-photo img { width: 100%;}
.ph-group-content-text-sale { display: none;}
.ph-group-content-text-name { display: block; margin-bottom: 5px; padding:  5px 10px; font:15px/1.5 "微軟正黑體"; color: white; letter-spacing: 2px; background: #597bc9;}
.ph-group-content-text-detail { display: block; margin-bottom: 20px; padding: 0 10px; font:15px/1.5 "微軟正黑體"; color: black; letter-spacing: 2px; }
.ph-group-content-text-price,
.newPrice { display: block;margin: 0 auto;  padding: 10px 0;  width: 90%; font: bold 30px/1 "arial","微軟正黑體" ; color: #fff200; text-align: center; border-radius: 99em; background: #f75858;}
.ph-group-content-text-price span,
.newPrice span { font-size: 0.5em; line-height: 2.1em; color: white; }

.hasNewPrice .ph-group-content-text-price { 
    display: block; margin: 15px auto 5px auto; padding: 0; width: 90%; font: bold 20px/1 "arial","微軟正黑體"; color: rgba(0,0,0,0.35);; text-align: left; text-decoration: line-through !important; background: none; }
.hasNewPrice .ph-group-content-text-price span { line-height: 2.4em; color: rgba(0,0,0,0.35);}
.hasNewPrice .newPrice,
.ph-group-content-text-price { position: absolute; bottom:10px ; left: 5%;}
.hasNewPrice .ph-group-content-text-price { bottom: 60px;}
.onlyPc { display: block; height: 0; }


/******銀行bank******/
.bank-wrap{display: flex; justify-content: space-between; flex-wrap: wrap; width: 94%; max-width: 1180px; margin:0 auto;}
.bank-content{position: relative; width: 46%; font-size: 18px; line-height: 1.2; border:solid 5px #404040; background: white; padding: 1.5em; margin: 4% 0; }
.bank-content-logo{ padding-bottom: 1.5em; border-bottom: dotted 1px; margin-bottom: 1.5em; text-align: center;}
.bank-content-logo img{width: 100%;  max-width: 250px;}
.bank-content-picture img{width: 100%;}
.bank-content:before{ position: absolute; left: -5%; bottom: -1em; content: ''; display: inline-block; width: 110%; height: 2em; background: #404040; border-radius: 5em;}
.bank-content:after{ position: absolute; left: 0; bottom: 0; content: ''; display: inline-block; width: 100%; height: 1em; background: white; border:solid 0 5px #404040;     box-sizing: border-box; }

.bank-ex{width: 94%; max-width: 1180px; margin:0 auto; font-size: 14px; line-height: 1.2;}
.bank-ex h4{font-size: 18px; text-align: center; font-weight: bold; padding: 0.5em 0;}
.bank-ex li{list-style-type: initial; padding: 0.5em 0; margin-left: 2em;}



/******************/
.coupon { border-radius: 20px; margin-bottom: 70px; overflow: hidden;}
.coupon-img img { width: 100%;}
.coupon-text { padding: 30px 0; background: #092c7c;}
.coupon-text p { font: 40px/1.5 "微軟正黑體"; color: white; text-align: center; letter-spacing: 2px; }
.coupon-text-btn { padding: 5px 10px; font-size: 0.7em; color: #fff200; border-radius: 99em; border:none; box-shadow: 0 5px 0 white; 
    transform: translateY(-7px); background: #f75858; transition: .5s; cursor: pointer; }
    .coupon-text-btn:hover { transform: translateY(0px)}


@media screen and (max-width: 1180px){
    .bank-content{width: 48%;     margin: 2% 0; border-width: 3px;}
    .lightBoxBankBtn { top:85%}
}


    
@media only screen and (max-width: 1024px) {
    /*******共通CSS******/
    #mtkContainer { background: none;}
    header.header { height: auto;}
    header h1 { display: block;}
    header h1 img { width: 100%;}
    .ph-group .ph-group-content { width: 31%;}

    /****首頁CSS***/
    .infor2Box { display: block;}
    .infor2Box .infor2Box-inner:nth-child(odd),
    .infor2Box .infor2Box-inner:nth-child(even) { margin-right: auto; margin-left: auto;}
    .infor2Box > .infor2Box-inner { display: block; margin: 0 auto 50px auto; padding: 25px; width: 90%;}
    .small2Box { display: block;}
    .small2Box-inner { display: block; margin: 0 auto 0px auto; padding: 0px; width: 100%; }
    .fixItemsBtn { position: fixed; padding: 0px; top:calc(100% - 30px); left: 0%; width: 100%; height: 30px; text-align: center; border-radius: 10px; background: #fff; z-index: 5;}
.fixItemsBtn div { display: none;}
.fixItemsBtn div.on { display: block;}
.fixItemsBtn a { display: inline-block; padding: 5px 2px  ; text-align: center; font: 16px/1 "微軟正黑體"; color: #092c7c; border-right: 1px solid rgba(0,0,0,0.07); }
.fixItemsBtn a:hover { font-weight: bold;}
.fixItemsBtn a:last-child { border-right: none;}
.lightBoxBank li { display: inline-block; margin: 0 1% 2% 1%; padding: 15px; width: 31%; border-radius: 20px; background: white; }

.coupon { margin-bottom: 50px;}
}


@media only screen and (max-width: 768px) {
    /*******共通CSS******/
    .gobalMenu { margin: 0 auto 20px auto; width: 95%;}
    .gobalMenu ul { width: 100%; flex-wrap: nowrap; }
    .gobalMenu li { display: inline-block; margin: 0; width: 33%; flex-shrink: 0;  flex-grow: 0; }
    .gobalMenu li a { padding: 5px ; font-size: 22px; /*font-weight: normal*/; text-align: center;  border:2px solid white}
    .gobalMenu li.on a { padding: 5px ; border:2px solid #fff200}
    .gobalMenu li.on a::after { display: none
        ;}
    .gobalMenu li:nth-child(1) a { border-radius: 99em 0 0 99em;}
    .gobalMenu li:nth-child(2) a { border-radius: 0;}
    .gobalMenu li:nth-child(3) a { border-radius: 0 99em  99em  0 ;}

     /******首頁CSS******/   
    .indexH2 { margin-top: 0px;}

    /******商品CSS******/    
    .itemMenu-inner { overflow-x: scroll;}
    .itemMenu a { width: 25%; text-align: center;  }
    .ph-group .ph-group-content { width: 48%;}

    .bank-content{width: 100%; font-size: 16px;  }
    .bank-content:before , .bank-content:after{display: none;}
    .lightBoxBankBtn { top:80%; width: 120px;}
    .onlyPc { display: none;}

}
@media only screen and (max-width: 500px) {
    /******首頁CSS******/
    .indexH2 { width: 90%;}
    .infor1Box { margin-bottom: 60px;}
    .infor2Box-inner-content,
    .infor1Box-inner-content { font-size: 35px;}
    .infor2Box .infor2Box-inner h3,
    .infor1Box h3 { margin-bottom: 20px; }
    
    .infor2Box .underLine::before,
    .infor1Box .underLine::before { height: 3px;}
    .bgInfor1 .infor2Box-inner-tag  {margin-bottom: 20px;}

    .small2Box-inner-expPhoto { padding-left: 0;}
    /*.infor1Box-inner-content { line-height: 2em;}*/
    .infor1Box-inner-tag {  margin-bottom: 20px; text-align: center;}
    .mWrap { display: block; margin-top: 20px;}

    .note li { font-size: 17px;}

    .table tr:nth-child(1) { display: none;}
    .table td { position: relative; display: block; margin-left: 50%; width: 50%; border-bottom: 1px solid rgba(0,0,0,0.07); border-right: 1px solid rgba(0,0,0,0.0);}
    .table td:nth-child(1)::after { box-sizing: border-box; content: "消費級距"; display: block; padding-top: 10px; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; color: white; background: #f75858;}
    .table td:nth-child(2)::after { box-sizing: border-box;content: "折價券金額"; display: block; padding-top: 10px;position: absolute; top: 0; left: -100%; width: 100%; height: 100%; color: white; background: #f75858;}
    .table td:nth-child(3)::after {box-sizing: border-box; content: "回饋張數"; display: block; padding-top: 10px;position: absolute; top: 0; left: -100%; width: 100%; height: 100%; color: white; background: #f75858;}
    .table td:nth-child(4)::after { box-sizing: border-box;content: "使用折價券消費限制";padding-top: 10px; display: block; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; color: white; background: #f75858;}

    .lightBox .table td:nth-child(1)::after { box-sizing: border-box; content: "活動時間"; }
    .lightBox .table td:nth-child(2)::after { box-sizing: border-box;content: "領取日期";}
    .lightBox .table td:nth-child(3)::after {box-sizing: border-box; content: "使用效期";}

    .noteBtn { padding: 0 0px;}
    .noteBtn a {  width: 48%; font:17px/1.6 "微軟正黑體";  border-radius: 99em; }
    
    /******商品CSS******/
    .itemMenu-inner { width: 100%; padding: 0; overflow-x: scroll;}
    .itemMenu a { padding: 5px 20px; width: auto; text-align: center; font-size: 18px; border-radius: 0; }
    .items { width: 100%; border-radius: 0;}
    .itemsH2 span, .infor2Box h3 span,.infor1Box h3 span { transform: scale(0.8);}
    .itemsH2 span.small { font-size: 40px;}
    .ph-group .ph-group-content { margin: 0 0 50px 0; padding: 0 0 15px 0; width: 100%;}

    .hasNewPrice .newPrice, .ph-group-content-text-price { position: static; }
.hasNewPrice .ph-group-content-text-price { bottom: 0px;}

.lightBoxBank li { margin-bottom: 50px;  width: 98%; }
.lightBoxBankBtn { top: 90%;right: 5px; width: 120px;}
.lightBoxBankBtn-img { display: none;}

.coupon { margin-bottom: 0px;}

.coupon-text  { padding: 10px 0 15px 0 ;}
.coupon-text p { font-size: 25px; letter-spacing: normal;}
.coupon-text-btn { transform: translateY(0);}


}
@media only screen and (max-width: 330px) {
    .infor2Box-inner-tag span,
    .infor1Box-inner-tag span { min-width: auto; font-size: 20px;}
    .infor2Box-inner-content, .infor1Box-inner-content { font-size: 28px;}3
    .fixItemsBtn a { font-size: 14px;}
}