* { -webkit-text-size-adjust: none; margin: 0px; padding: 0px; }
body { margin: 0; padding: 0; font-size: 20px; font-family: '微軟正黑體', sans-serif; }
body, html { width: 100%; height: 100%; }
body, ul, li { margin: 0; padding: 0; }
ul, li { list-style: none; }
a:link, a:visited { color: #fff; text-decoration: none; }
/*a:hover, a:active { color: #000; }*/
img { border: 0px; }
/**/
.clear { clear: both; }
.clearfix:after { display: table; clear: both; content: ' '; }

#container { width:100%; max-width:1000px; margin:0 auto; }

.header { background-color: #F5F5F9; height: 100px; padding: 0 30px; }
.header .logo { float: left; margin-top: 22px; }
.header .lang { float: right; width: 30px; margin-top: 35px; }

.top-banner { text-align:center; position:relative; overflow: hidden; width: 100%; height: 250px; }
.top-banner img { display:block; width:100%; position: absolute; top: 50%; left: 0; margin-top: -180px; }

.content { padding: 30px; }
p { color: #7C5F37; margin-bottom: 20px; }
h3 { font-size: 30px; font-weight: normal; color: #909D27; text-align: center; }
.txt-center { text-align: center; }
.hr { background-color: #909D27; height: 1px; margin: 30px 0; }
.bowerby { font-size: 14px; margin-top: 40px; }
.bowerby img { vertical-align: middle; margin-left: 10px; }
.app-info { margin: 30px 0; }
img.dl_app { width: 100%; max-width: 518px; }
.desktop { display: block; }
.mobile { display: none; }

@media screen and (max-width: 767px) {
.header { height: 80px; padding: 0 15px; }
.header .logo { margin-top: 12px; }
.header .lang { width: 40px; margin-top: 20px; }

.top-banner { height: auto; }
.top-banner img { width:100%; position: relative; top: 0; left: 0; margin-top: 0; }

.content { padding: 15px; }
p { font-size: 90%; }
h3 { font-size: 22px; }
.hr { margin: 20px 0; }
.bowerby { font-size: 11px; margin-top: 30px; }
.bowerby img { width: 160px; }
.app-info { margin: 20px 0; }
img.app_ico { width: 100px; }
}

@media screen and (max-device-width: 1366px) {
.desktop { display: none; }
.mobile { display: block; }
a.green-btn { background-color: #909D27; width: 80%; padding: 7px 0; display: inline-block; margin-bottom: 5px; font-size: 90%; }

/* in-app */
.app { padding-bottom: 70px; }
.amount-btn { margin: 20px 0; }
.btn { -webkit-appearance: none; border-radius: 0; border: 1px solid #DDDDDD; background-color: #ffffff; color: #909D27; width: 49%; display: inline-block; padding: 10px 0; font-size: 18px; font-family: '微軟正黑體', sans-serif; margin-bottom: 7px; outline: none; }
.btn.active { background-color: #909D27; color: #ffffff; }
.other { position: relative; width: 99%; border: 1px solid #DDDDDD; background-color: #ffffff; }
.other .field-title { position: absolute; top: 7px; left: 20px; color: #909D27; }
.other .txt { border: 0; color: #909D27; display: block; margin-left: 120px; padding: 10px 0; width: 55%; font-size: 18px; font-family: '微軟正黑體', sans-serif; outline: none; }
.en .other .txt { margin-left: 130px; }
.total-bar { position: fixed; bottom: 0; left: 0; width: 100%; }
.total-bar .half { width: 50%; float: left; }
.total-bar .total-amount { padding: 0; line-height: 60px; box-sizing:border-box; height:60px; width: 100%; border: 1px solid #DDDDDD; background-color: #ffffff; color: #909D27; font-size: 18px; font-family: '微軟正黑體', sans-serif; text-align: center;}
.total-bar .total { padding:0; line-height:60px; height:60px; margin-bottom: 0; width: 100%;}
}
.btn[disabled] {
    background-color: #b8c16a;
}
.view.app {
    display: none;
}
.view.web {
    display: block;
}
.in-app .view.app {
    display: block;
}
.in-app .view.web {
    display: none;
}
.mobile .ios-only,
.mobile .android-only {
    display: none;
}
html.ios .mobile .ios-only {
    display:inline-block;
}
html.android .mobile .android-only {
    display:inline-block;
}