/*bank*/
#mtkContainer a, #mtkContainer a:hover{ text-decoration: none; }
#bank{padding: 3%; font-size: 22px; background: url(../images/bank_bg.jpg) top center repeat-y,#000;}
#bank .logo{text-align: center; padding: 1em 0;}
#bank .logo img{width: 65%; max-width: 360px; }
#bank .bankBox{ background: white; border-radius: 15px; margin: 2em auto 3em; max-width: 1220px;}
#bank .bankBox.blue{background:#463076;}
#bank .bankBox h3{background:#a70017; color: white; font-weight: bold; font-size: 136%; text-align: center; width: 60%; margin: 0 auto; padding: 1em 0; border-radius: 0 0 15px 15px;}
#bank .bankBox h3 br{display: none;}
/*#bank .bankBox.blue h3{background:#6b49b3;}
#bank .bankBox.redred h3{background:#e2211c;}*/
#bank .bankBox .btn{display: block; width: 100%; font-weight: bold; font-size: 22px;text-align: center; padding: 1em 0; border-radius: 15px; color: white; background:#a88d46; box-shadow: 0 9px 0 #8c6e28; transition: all 0.2s;}
#bank .bankBox .btn.red{ background:#e2211c; box-shadow: 0 9px 0 #9e1813; color: white;}
/*#bank .bankBox .btn.blue{ background:#007679; box-shadow: 0 9px 0 #005f61; color: white;}*/
#bank .bankBox .btn span{padding-left: 2em;}
#bank .bankBox .btn1{ padding: 0 2em 2em; }
/*#bank .bankBox .btn2 .btn{ background: #553b8f; box-shadow: 0 9px 0 #342457; color: white;}*/
#bank .bankBox .btn:hover{ transform: translateY(5px); }
#bank .bankBox .btn1 .btn:hover{  box-shadow: 0 5px 0 #8c6e28;  }
#bank .bankBox .btn1 .btn.red:hover{  box-shadow: 0 5px 0 #9e1813;  }
/*#bank .bankBox .btn1 .btn.blue:hover{  box-shadow: 0 5px 0 #005f61; }
#bank .bankBox .btn2 .btn:hover{  box-shadow: 0 5px 0 #342457; }*/
#bank .bankBox h4{width: 100%;color: #d61518;font-size: 300%; font-weight: bold;text-align: center;letter-spacing: 0.1em; padding: 0.5em 0;}
#bank .bankBox h5{text-align: center; font-size: 180%; line-height: 1.2; font-weight: bold; letter-spacing: 0.05em; padding: 1em 1em 0;}
#bank .bankBox h6{text-align: center; font-size: 100%; line-height: 1.2; font-weight: bold; letter-spacing: 0.05em; padding: 1em 1em 0; color: red;}

#bank .bankBox-2 , #bank .bankBox-c26{display: flex; justify-content: center; padding: 2em;}
#bank .bankBox-2 dl{width: 50%; font-weight: bold; padding: 0 1.5em;/*padding: 0 2em;*/ display: flex; flex-wrap: wrap; align-content: start; }
#bank .bankBox-2 dl:first-child{border-right:none; }
#bank .bankBox.redred .bankBox-2 dl:first-child{border-right:none;}
#bank .bankBox-2 .line{border-right:solid 1px #a70017;}

#bank .bankBox-2 dt{width: 100%; color: #00b476; font-size: 300%; text-align: center; letter-spacing: 0.1em;   padding-bottom: 0.5em;}
#bank .bankBox-2 dt.tripTitle{font-size: 180%; color: #6a4d00;}
#bank .bankBox-2 dt.cardName{ font-size: 180%; color: #e2211c;}
#bank .bankBox-2 dt.cardInfo{ font-size: 105%; color: #000; letter-spacing: 0.05em;}
#bank .bankBox-2 dt.cardInfo br{display: none;}
#bank .bankBox-2 dd{  padding: 1em 0;  line-height: 1.5; width: 100%; }
#bank .bankBox-2 dd p.inlineBlock{display: inline-block;}
#bank .bankBox-2 dd.btn2{  align-self: flex-end;}
#bank .bankBox-2 dd b{background:#e2211c; color: white; padding: 0 0.5em; margin: 0 0.2em; border-radius: 5em;}
#bank .bankBox-2 dd .mark2{display: inline-block; font-size: 180%; line-height: 1.3;}
#bank .bankBox-2 dd .mark2 span{font-size: 160%;vertical-align: baseline;}
#bank .bankBox-2 dd small{ color: #4c4c4c; font-weight: normal; vertical-align: baseline;}
#bank .bankBox-2 dd small strong{font-weight:bold; vertical-align: baseline;}
#bank .bankBox-2 dd p.mark2 small{font-size: 50%; }

#bank .bankBox-2 dd p em{font-style: normal; color: #e2211c; font-size: 180%;vertical-align: baseline;}
#bank .bankBox-2 dd p br.brbank{display: none;}

#bank .bankBox-2 dd.details a.pushBtn{display: block; width: 100%;font-weight: bold;text-align: center; padding: 0.5em 0;border-radius: 99em;color: white; background: #a88d46; transition: all 0.2s;}
#bank .bankBox-2 dd.details:hover a.pushBtn{transform: translateY(5px); background: #8b6d2c;}

#bank .bankBox-2 dd.qrcode{text-align: center;}
#bank .bankBox-2 dd.qrcode img{max-width: 168px;}

/*#bank .info{display: flex; justify-content: center; align-items: center;   line-height: 1.2;}
#bank .info .left{   font-size: 170%; padding-right: 1em; margin-right: 1em; border-right:solid 1px; }
#bank .info .right{font-size: 110%;}*/


/*警語*/
.info{display: flex; justify-content: center; align-items: center; line-height: 1.2; padding: 1.5%; color: #fff; background: #d61518;}
.info .left{ font-size: 170%; padding-right: 1em; margin-right: 1em; border-right:solid 1px; }
.info .right{font-size: 110%;}


#bank .ex{ padding: 2em; color: gray;}
#bank .ex h6{text-align: center; font-size: 100%; padding: 1em 0;}
#bank .ex ul{padding-left: 1em;}
#bank .ex li{font-size: 70%; line-height: 1.5; list-style-type: decimal; }

#bank .bankBox .bankBox-c26 .group-type-ph { display: flex; justify-content: space-between;}

#bank .bankBox .bankBox-c26 .ph{
    width: 32%; 
    padding: 0;
    display: inline-block;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    height: auto;
    padding: 10px;
}

#bank .bankBox .bankBox-c26 .ph a {
    position: relative;
    display: block;
    text-decoration: none;
    background: white;
    color: #666666;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}

#bank .bankBox .bankBox-c26 .ph .ph-img img {width: 100%;}
#bank .bankBox .bankBox-c26 .ph .tag2{position: absolute; top: 0; right: 0px; background: rgba(0,0,0,0.7); font: 18px/1.4 "微軟正黑體"; padding: 0 10px; color: #FFF;}
#bank .bankBox .bankBox-c26 .ph .sale{position: absolute; top: 0;left: 0px; background: #a88d46; font: 18px/1.4 "微軟正黑體"; padding: 0 10px; color: #FFF;}
#bank .bankBox .bankBox-c26 .ph .ph-title {font-size: 24px;line-height: 1.3; padding: 5%;color: black; margin-bottom: 1em;}
#bank .bankBox .bankBox-c26 .ph .ph-detail { font-size: 16px; line-height: 1.5; overflow: hidden; padding: 0 5%; margin-bottom: 4em;}
#bank .bankBox .bankBox-c26 .ph .ph-feature {display: none;}
#bank .bankBox .bankBox-c26 .ph .price {
    position: absolute;
    bottom: 1em;
    right: 1em;
    /*display: inline-block;*/
    font-family:"Century Gothic", Arial, "Microsoft JhengHei";
    font-size: 16px;
    height: 2em;
    line-height: 2em;
    padding:0 1em; 
    background:red;
    font-weight: bold;
    color: white;
    border-radius: 5em;
}

#bank .bankBox .bankBox-c26 .ph .price * {font-style: normal; font-size: 100%;}
#bank .bankBox .bankBox-c26 .price span{vertical-align: inherit; }
#bank .bankBox .bankBox-c26 .ph .price i{ font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;}

#bank .bankBox .bankBox-c26 .ph .gobtn{
    /*position: absolute; display: inline-block; bottom: 0; right: 8em;*/
    display:  block;
    font-size: 16px;
    line-height: 2em;
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font-family:"Century Gothic", Arial, "Microsoft JhengHei";
    background: #cc001d;
    font-weight: bold;
    color: white;
    padding:0 1em; 
    transition: all .3s;
}
#bank .bankBox .bankBox-c26 .ph:hover .gobtn{background: red;}


/*下單禮*/
#bank .giftBox{
    position: relative; 
    display: block;
    background: linear-gradient(90deg, rgb(222, 203, 162), rgb(239, 224, 192));
    background: -webkit-linear-gradient(90deg, rgb(222, 203, 162), rgb(239, 224, 192));
    padding: 2em 1em;
    text-align: center;
}
#bank .giftBox .wrap{
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
}
#bank .giftBox .pic{width: 50%; }
#bank .giftBox .pic img{width: 100%; max-width: 463px;}
#bank .giftBox .text{width: 50%;padding-left: 1em;}
#bank .giftBox .text p{font-weight: bold; line-height: 1.5; }
#bank .giftBox .text p small{font-weight: normal; font-size: 70%; line-height: 2;}



@media screen and (max-width:1024px) {
    #bank .bankBox-2 dd p img{ width: 100%;}

    #bank .giftBox .wrap{width: 90%;}
}


@media screen and (max-width:980px) {
    #bank{font-size: 18px;}
    #bank .bankBox h3{width: 80%;}
    #bank .bankBox-2 , #bank .bankBox-c26{padding: 2em 0;}
    #bank .bankBox-2 dl:first-child, #bank .bankBox-2 dl:nth-child(2){ padding: 0 2em; }
    /*#bank .info .left{   font-size: 120%; padding-right: 0.5em; margin-right: 0.5em;  }
    #bank .info .right{font-size: 80%;}*/
    .info .left{font-size: 120%; padding-right: 0.5em; margin-right: 0.5em;  }
    .info .right{font-size: 80%;}

    #bank .bankBox .bankBox-c26 .group-type-ph{padding:0 2em;}
    #bank .bankBox .bankBox-c26 .ph .ph-title{font-size: 20px;}

    .bankBox-c26 .group-type-ph{padding:0 2em;}
    .bankBox-c26 .ph .ph-title{    font-size: 20px;}
    
}

@media screen and (max-width:768px) {
    #bank .giftBox .wrap .text p br{display: none;}
}


@media screen and (max-width:640px) {
    #bank .bankBox h3{width: 100%; border-radius: 0;}
    #bank .bankBox-2 , #bank .bankBox-c26{flex-wrap: wrap; padding: 1em;}
    #bank .bankBox-2 dl{width: 100%; padding: 0 !important; text-align: center;}
    #bank .bankBox-2 dl:first-child, #bank .bankBox-2 dl:nth-child(2){ border-right: none; padding: 1em 0 !important;}
    #bank .bankBox .btn1{ padding: 0 1em 2em;}
    #bank .bankBox-2 dt{ font-size: 250%; }
    #bank .bankBox h5{font-size: 140%;}
    #bank .ex{padding: 1em;}
    #bank .bankBox .btn span{padding-left: 0; display: block; padding-top: 0.5em;}

    #bank .bankBox .bankBox-c26 .ph .ph-title{font-size: 18px;margin-bottom: 0;}
    #bank .bankBox .bankBox-c26 .ph .ph-detail{font-size: 14px;}
    #bank .bankBox .bankBox-c26 .group-type-ph{flex-wrap: wrap; padding: 0;}
    #bank .bankBox .bankBox-c26 .ph{width: 100%; padding: 1em 0;}
    
    #bank .bankBox-2 .line{border-right:none;}
    #bank .bankBox-2 dd p br.brbank{display: block;}

    .info{padding: 2% 1.5%;flex-wrap: wrap;}
    .info .right{font-size: 60%;}


    #bank .giftBox{padding: 3em 1em 2em;}
    #bank .giftBox .wrap{width: 100%;flex-wrap: wrap-reverse;}
    #bank .giftBox .wrap .pic{width: 100%;}
    #bank .giftBox .wrap .text{width: 100%; padding: 0 0 1em 0;}
}

@media screen and (max-width:500px){
    .info{ flex-wrap: wrap;padding:4% 2%;}
    .info .left{border-right:none; margin-bottom: 8px; padding-right: 0; margin-right: 0;}
    .info .left br{display: none;}
}

@media screen and (max-width:414px) {
    #bank .bankBox h3 {line-height: 1.2;}
    #bank .bankBox h3 br{display: block;}
    #bank .bankBox-2 dt.cardInfo{line-height: 1.3;}
    #bank .bankBox-2 dt.cardInfo br{display: block;}
}