﻿
/* --手機版型------------------------------------- */



 @media (max-width:1024px) {  
body {/*height:100vh; */ }
    .text-center-m {
        text-align: left!important;
    }
/* .wrap_tn {width:100vw; margin:0 auto; padding:0 0; overflow: hidden;  background:#fff url(../images/top_mobile_tn_kv.jpg) no-repeat  center top;background-size: 100% 700px;} */




.uberwrap_tn {width:100vw; margin:0 auto; padding:0 0; overflow: hidden;  background:#fff url(../images/top_mobile_tn_kv.jpg) no-repeat  center top;background-size: 100% 700px;}
.wrap_cn {width:100vw; margin:0 auto; padding:0 0; overflow: hidden;  background:#fff url(../images/top_mobile_cn_kv.jpg) no-repeat  center top;background-size: 100% 700px;}
.uberwrap_cn {width:100vw; margin:0 auto; padding:0 0; overflow: hidden;  background:#fff url(../images/top_mobile_cn_uberkv.jpg) no-repeat  center top;background-size: 100% 700px;}
.content {margin:0 auto; padding:0 0;/*width:828px;*/}
.content h2{font-size:1.7em; margin-bottom:20px; text-align: center;font-weight:bold;} 
.content h2.step{background-color:#0073ac; }
.content h2.traffic{background-color:#6a3906;}
.content article{margin:5% 0; display:flow-root;}
.content h3{font-size:1.3em;font-weight:bold; line-height:1.6em;text-align: center;}
.content h4{font-size:.9em;font-weight:bold; line-height:1.4em; }
.content h5{font-size:1em;font-weight:bold; line-height:1.4em;padding-left: 5px;}
.content .caption{ margin:0 25%;}
.content h4.Uber_Discount{text-align: center;font-size: .9em;font-weight: bold;margin: 15px 20px;}
.Uber .caption{font-weight: bold;text-align: center;font-size: 1.2em;margin: 20px 0 10px 0;}
.Uber .member{display: flex;flex-direction: row;justify-content: center;}
.ios-wrap{width: 150px;margin: 1%;}
.ios-wrap img{width:100%;}
.android-wrap{width: 150px;margin: 1%;}
.android-wrap img{width:100%}
.content figcaption{ margin:5% 25%;}
.note{font-size:0.95em;margin:5% 10%;}
span{border-top:solid 1px #ffaeae;}
#goToTop { bottom:5%;right:2%; }
/*header----------------------------------------------------*/
.clearfix:after {content: ".";display: block; height: 0;clear: both;visibility: hidden;}
.clr { clear:both; }
/* #ad_kv_tn{ height:700px; margin:0 auto;} */
#ad_kv_cn{ height:700px; margin:0 auto;}
/* .qrcode{margin-bottom: 2%;}
.qrcode img{margin: 0 5%; text-align:center;}
.qrcodeqrcode h4{float:left; width:200px;margin-left:250px; text-align: left;text-align: justify; display:contents; color:#a20000;} */

.Freecoupon,.step_box{ margin:2% auto;}
.Freecoupon figure {width:75%; margin:3% 10%; padding:0 0; }
.Freecoupon figure .coupon-card .cash span{margin:15px 0 0 15px; } 
.Freecoupon figure .coupon-card .cash .meter.beauty{ letter-spacing:0px;margin: 3% 0 0 120px;}
.Freecoupon figure .coupon-card .cash .meter.luxury{letter-spacing:-5px;margin: 3% 0 0 80px;}
.Freecoupon figure .coupon-card .cash .meter.food{ letter-spacing:0px;margin: 3% 0 0 120px;}
.step_box figure{margin:3% 10%;}
.step_box figure .step123 h4{ font-size:3em;text-align:center;width: 100%;height:80px; margin-top:10%} 
.step_box figure .step123 h4 span{ text-align:center; font-size:1em; }  
.step_box figure .step123 p { font-size:.9em;width:100%;padding:0 0;text-align: center; } 
.traffic h3.map{font-size:1.2em; text-align:left; font-weight:bold; padding-left:40px; margin:0 5%; }
.traffic p {float:left;font-size:0.9em;  margin: 0 10% 0 5%;;}



 }
/*768px------------------------------------------------*/
@media screen and (min-width:320px)and (max-width:767px) {
.wrap_tn,.wrap_cn,.uberwrap_tn,.uberwrap_cn  {background-size: 484px 420px;width: 100vw;margin: 0 auto;}
/* #ad_kv_tn{ height:360px;margin:0 auto; background-size: 360px 320px;} */
#ad_kv_cn{ height:360px;margin:0 auto; background-size: 360px 320px;}
.list-type1 li{ padding-left:0; margin-left:25px; list-style:decimal; margin-bottom: 5px;text-align: justify;font-size:0.8em;}
.content article{margin:5% 0; display:flow-root; /*width:50%;*/}
/* #goToTop {bottom:2%;right:0%;height:60px;width:60px;background-size:60px 60px;} */
.note{font-size:0.95em;margin:5% 5%;}

/*header----------------------------------------------------*/ 
#menu {top: 1%;right:2%; z-index: 999;position: absolute; font-size:.7em;} 
#menu ul {padding: 0;list-style: none;position: relative;display: inline-block;width:100%;}
#menu ul li {float: left;padding: 0;}
#menu ul li:hover {cursor: pointer;}
#menu ul li a {display: block;padding:5px 5px 5px 30px;color: black;text-decoration: none;}
.Language ,.Language a{background:url(../images/icon_world.svg) no-repeat 5px 12px; padding-left: 15px; border: none; }
#menu ul ul {display: none;padding: 0px;width:100%;position: absolute;top: 100%;background-color:rgba(255,255,255,0.5); }
#menu ul li:hover > ul {display: block; }
#menu ul ul li {float: none;text-align:left;position: relative; /*padding: 5px;*/border-bottom: 1px dashed #000;}
#menu ul ul ul {position: absolute;top:-1px;left: 100%;width: 100%;}
/*SHARES 分享------------------------------------------------*/
#SHARES {position:fixed;z-index:999;top:50%;right:0;height:230px;width:60px;background-color:rgba(255,255,255,0.5);border-radius:15px 0 0 15px; }
#SHARES ul { padding:5px 0;margin:0;text-align: center;font-size:0.6em;line-height:1em; color: #575757;}
#SHARES li { margin:5px 0;}
#SHARES li a {display: block; height:40px;width:40px;display: block;}
#SHARES .S_line{background-size:40px 40px;}
#SHARES .S_wechat{background-size:40px 40px;}
#SHARES .S_mail{background-size:40px 40px;}
#SHARES .S_pdf{ background-size:40px 40px;}
/*qrcode----------------------------------------------------*/
/* .qrcode{margin:0 4% 0 4%;line-height: 1em;}
.qrcode img{margin:0 3%;width:120px;height:120px;background-size:120px 120px;}
.qrcode h4{float:left; width:100px; } */

.qrcode h4{width: 90%;margin: 20px auto;}

/*自由行優惠券----------------------------------------------------*/
.Freecoupon,.step_box{ /* margin:8% 3% 0% 3%;*/ padding:0 ;width:84%;display: block;clear: both;}
.Freecoupon h2.title{text-align: center;margin: 0 0 5% 0; } 
/* .Freecoupon h4{ width:100%; margin: 0 20%;} */
.Freecoupon  h3{font-size: 1em;font-weight: normal; margin:2% 2% 5% 2%;}
    .Freecoupon h2 span {
        background-color: #fff;
        text-align: center;
        display: inline-block;
        padding: 0 20px;
        line-height: 50px;
    }
/* .Freecoupon h4{ width:100%; margin: 0 10%;} */
.Freecoupon figcaption{ margin:10% 5% 5% 5%;}
.Freecoupon figcaption span{text-align:center; display: block;}
.Freecoupon figcaption span.beauty{ border-bottom:solid 1px #f5b5c2; }
.Freecoupon figcaption span.luxury{ border-bottom:solid 1px #8ab4b9;}
.Freecoupon figcaption span.food{ border-bottom:solid 1px #f7d0ad;}
.Freecoupon figure {width:360px;border-radius:20px; margin:3% auto; padding:0 0; }
.Freecoupon figure.beauty {background-color: #f5b5c2;width: 95%;}
.Freecoupon figure.luxury {background-color: #8ab4b9;width: 95%;}
.Freecoupon figure.food {background-color: #f7d0ad;width: 95%;}
.Freecoupon figure .coupon-card{ width:90%; border-right:dotted 5px #fff; padding:10% 0% 5% 2%; }
.Freecoupon figure .coupon-card p{font-size:1.6em; color:#fff; text-align: center;letter-spacing:0;}
.Freecoupon figure .coupon-card .cash {margin:0 2% 0% 2%;display:inline-flex;}
.Freecoupon figure .coupon-card .cash span{float:left; width:95px;font-size:2em;line-height:0.9em;margin:8% 0 0 2%; } 
.Freecoupon figure .coupon-card .cash .meter{float:left; font-size:3.5em;}
.Freecoupon figure .coupon-card .cash .meter.beauty{ letter-spacing:0px;margin:35px 0 0 30px ;}
.Freecoupon figure .coupon-card .cash .meter.luxury{ letter-spacing:0px;margin:13% 0 0 5px;}
.Freecoupon figure .coupon-card .cash .meter.food{ letter-spacing:0px;margin:13% 0 0  30px;}
/* .Freecoupon figure .coupon-card .barcode{width:90%; height:60px; }
.Freecoupon figure .coupon-card .barcode.beauty{background-size:270px 50px; }
.Freecoupon figure .coupon-card .barcode.luxury{background-size:270px 50px; }
.Freecoupon figure .coupon-card .barcode.food{background-size:270px 50px; } */
/*市區購物3步驟----------------------------------------------------*/
.step_box h3{font-size:1em;font-weight:normal;margin: 0 2%; }
.step_box figure .step123{margin:3% auto; padding:0 10px;}
.step_box figure .step123 h4{ font-size:2.6em;text-align:center;width: 100%;height:70px;font-style:oblique; margin-top:10%} 
.step_box figure .step123 h4 span{ text-align:center; font-size:0.9em; }  
.step_box figure .step123 p { font-size:.9em;width:100%;padding:0 0;   } 
/*交通資訊----------------------------------------------------*/  
.traffic h3.map{background-size:30px 30px; font-size:.9em; text-align:left; padding-left:40px; margin:10% 0 20px 0; }
.traffic p {float:left;font-size:0.8em; margin-bottom:10px; padding-left: 5px;}
.traffic{ margin:8% 3% 0% 3%; padding:0 ;display: block;clear: both;}



/* goToTop */
#goToTop {position: fixed;z-index:999;bottom:6%;right:2%;height:50px;width:50px;border-radius: 50%;text-align:center;line-height:50px;cursor: pointer;background-color: #494848;color: rgb(255, 255, 255);}
#goToTop a {height:50px;width:50px;display: block;color: rgb(255, 255, 255);text-align: center;font-size: small;}

}


/*736px------------------------------------------------*/
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
.qrcode{margin: 0 10%;}
.Freecoupon,.step_box,.traffic{margin:10% 5% 0% 5%;; padding:0 ;width:90%; display:block; clear: both;}	
.traffic h3.map{background-size:30px 30px; font-size:.9em; text-align:left; padding-left:40px; margin:10% 0 20px 0; }
.traffic p {float:left;font-size:0.8em; margin-bottom:10px; padding-left: 5px;}
}

/*321px------------------------------------------------*/
@media (max-width:321px) {
/* .content {margin:0 auto; padding:0 0;width:640px;} */


.qrcode{margin:0 5%;}
.qrcode img{margin:0 3%;width:120px;height:120px;background-size:120px 120px;}
/* .qrcode h4{float:left; width:100px; } */

/*自由行優惠券----------------------------------------------------*/
.Freecoupon,.step_box,.traffic{margin:10% 0% 0% 0%;; padding:0 ;width:100%; display: block;clear: both;}
.Freecoupon figcaption{ margin:10% 0 5% 0;}
.Freecoupon figure.beauty {background-color: #f5b5c2;width: 90%;}
.Freecoupon figure.luxury {background-color:#8ab4b9;width: 90%;}
.Freecoupon figure.food {background-color: #f7d0ad;width: 90%;}
.Freecoupon figure .coupon-card{ width:90%; border-right:dotted 5px #fff; padding:4% 0% 5% 2%; }
.Freecoupon figure .coupon-card p{font-size:.9em;  letter-spacing:0; }
.Freecoupon figure .coupon-card .cash {margin:0 2% 2% 2%;display:inline-flex;}
.Freecoupon figure .coupon-card .cash span{ width:65px;font-size:1.5em;line-height:0.9em;margin:7% 0 0 4%; } 
.Freecoupon figure .coupon-card .cash .meter{float:left; font-size:4em;}
.Freecoupon figure .coupon-card .cash .meter.beauty{ letter-spacing:0px;margin:20px 0 0 0 ;}
.Freecoupon figure .coupon-card .cash .meter.luxury{ letter-spacing:-8px;margin:9% 0 0 0;}
.Freecoupon figure .coupon-card .cash .meter.food{ letter-spacing:0px;margin:9% 0 0 0;}
/* .Freecoupon figure .coupon-card .barcode{width:90%; height:60px; } */
/* .Freecoupon figure .coupon-card .barcode.beauty{background-size:270px 50px; }
.Freecoupon figure .coupon-card .barcode.luxury{background-size:270px 50px; }
.Freecoupon figure .coupon-card .barcode.food{background-size:270px 50px; } */

/*交通資訊----------------------------------------------------*/  
.traffic h3.map{background-size:30px 30px; font-size:.9em; text-align:left; padding-left:30px; margin:5% 4%; }
.traffic p {float:left;font-size:0.8em;margin:0 4%; padding-left: 5px;}

}
