* { -webkit-text-size-adjust: none; }
body { margin: 0; padding: 0; font-size: 16px; font-family: Arial, Helvetica, 'Microsoft JhengHei', '敺株��迤暺煾��', sans-serif; color:#333333; }
ul, li { list-style: none; margin: 0; padding: 0; }
a:link, a:visited { color: #333333; text-decoration: none; }
a:hover, a:active { color: #b00931; }
img { border: 0px; }
sup { font-size: 0.6em;}
.clear { clear: both; }
.clearfix:after { display: table; clear: both; content: ' '; }
.view_desktop { display: block !important; }
.view_mob { display: none !important; }
/**/
#content { position:relative; width: 100%; max-width: 1000px; margin: 0 auto; padding:25px 0 100px; }
/**/
#banner_inner { background-color: #F3E88B; height: auto; }
#banner_inner img { display: block; width: 100%; max-width: 1000px; max-height: 295px; margin: 0 auto; }
/**/
.bocpay { font-size: 14px; }
/**/
.highlight { font-size: 18px; }
.bocpay h5, .bocpay h4, .bocpay h3 { margin-bottom: 0; }
.remark { font-size: 11px; margin-bottom: 0;}
ul.remark { padding: 0; margin-left: 15px; }
ul.remark li { list-style: disc; }
div.remark li.tabmark { list-style: none;margin-left: 15px; }
div.remark li.s:before { content: "\002a\00a0\00a0\00a0"; display: inline-block; width: 15px; margin-left: -15px; vertical-align: top; text-align: right;}
div.remark li.h:before { content: "\0023\00a0\00a0\00a0\00a0\00a0\00a0"; display: inline-block; width: 15px; margin-left: -15px; font-size: 6px; vertical-align: top; text-align: right;}
div.remark li.t:before { content: "\005e\00a0\00a0\00a0\00a0\00a0\00a0"; display: inline-block; width: 15px; margin-left: -13px; margin-top: 2px; font-size: 8px; vertical-align: top; text-align: right;}

.tabs { display: table; width: 100%; }
.tabs a { display: table-cell; width: 1%; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; vertical-align: middle; font-size: 18px; font-weight: bold; border-left: 1px solid #c8c8c8; }
.tabs a:first-child { border-left: 0; }
.tabs img, .tabs span { vertical-align: middle; display: inline-block; }
.tabs span { margin-left: 20px; }

.seation { position: relative; }
.seation-head { position: relative; top: 34px;}
.seation-head img { width: 100%; max-width: 510px; display: block; margin: 0 auto;}

.offset { position: relative; padding-top: 10px; }
.offset .border { margin-right: 1%; margin-top: -15px; border: 5px solid #45a19c; border-radius: 10px; -webkit-box-shadow: 4px 4px 0px 0px rgba(102, 205, 199, 1); -moz-box-shadow: 4px 4px 0px 0px rgba(102, 205, 199, 1); box-shadow: 4px 4px 0px 0px rgba(102, 205, 199, 1); }
.offset .tab-head { position: relative; }
.offset .tab-head img { position: relative; display: block; width: 100%; max-width: 290px; z-index: 2; }
.offset .tab-head:after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #45a19c; }
.offset .tab-body { padding: 30px 60px; }
.offset p { font-size: 18px; text-align: center; }
.offset ul { margin-top: 10px; margin-left: 20px; }
.offset li { list-style: disc; }

.leadin { padding: 60px 30px 20px; }
.leadin strong{color: rgba(176, 9, 49, 1);}
.bullet {display: block; margin: 0 auto;width: 100%; text-align: center;}
.bullet .bullet-ico {display: inline-block;width: 40%;vertical-align: middle;}
.bullet .bullet-ico img{display: block; margin: 0 auto; right: 0; width: 80%; max-width: 150px; float: right;}
.bullet .bullet-body {display: inline-block;width: 50%;vertical-align: middle;}
.bullet .bullet-body p{display: block; margin-left: 10px; text-align: left;}

.table { display: table; width: 100%; }
.refund, .monday { display: table-cell; vertical-align: middle; }
.refund { padding: 0 7%;}
.refund p { text-align: left; }
.refund .sticker { width: 100%; max-width: 680px; position: relative; margin-left: auto; margin-right: auto;}
.refund .sticker img { width: 100%; display: block; }
.refund .sticker a { position: absolute; right: 0%; width: 27%; height: 50%; }
.refund .sticker a.link1 { bottom: 50%; }
.refund .sticker a.link2 { bottom: 0%; }
.monday { width: 192px; }
.monday img { width: 100%; max-width: 192px; display: block; }
.monday.view_m { display: none; }

.blue_table { border-radius: 10px; border: 1px solid #45a19c; }
.blue_table th, .blue_table td { padding: 8px 5px; font-size: 18px; text-align: center; }
.blue_table th { background-color: #45a19c; color: #ffffff; border-right: 1px solid #ffffff; }
.blue_table th:first-child { border-radius: 8px 0 0 0; }
.blue_table th:last-child { border-right: 0; border-radius: 0 8px 0 0; }
.blue_table td { border-right: 1px solid #45a19c; border-bottom: 1px solid #45a19c; }
.blue_table td:last-child { border-right: 0 }
.blue_table tr:last-child td { border-bottom: 0 }

.tips { font-style: italic; margin-top: 50px; }
.tips strong { font-size: 110%; }
.highlight { color:#b00931; }

.shop_list { border-bottom: 1px solid #cfcfcf; display: table; width: 100%; }
.shop_list.last { border-bottom: 0; }
.shop_list .logo, .shop_list .detail { display: table-cell; vertical-align: middle; padding: 25px 0; }
.shop_list .promo { display: table-cell; vertical-align: middle; padding: 17px 0 0 10px; }
.shop_list .promo2 { display: table-cell; vertical-align: middle; padding: 0 0 0 0; font-size: 16px;}
.shop_list .promo2 strong { color: #b10a32; }
.shop_list .logo { width: 45%; padding-left: 20%; }
.shop_list .logo img { width: 100%; max-width: 140px; }
.shop_list .promo img { width: 100%; max-width: 70px; }
.shop_list h5 { font-size: 20px; margin-top: 0; color: #b10a32; }
.shop_list li { font-size: 16px; }
.shop_list li strong { color: #b10a32; }
.shop_list h4 { font-size: 16px; margin-top: 5px; }

.logo_group { text-align: center; padding-bottom: 20px; }
.logo_group img { display: inline-block; width: 28%; max-width: 140px; margin: 10px 10px 0; }
.btn_detail img { display: block; margin: 0 auto 10px; }

.share { position: relative; padding-top: 10px; }
.share .border { margin-right: 1%; padding-bottom: 30px; border: 5px solid #093b80; border-radius: 10px; -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 118, 188, 1); -moz-box-shadow: 4px 4px 0px 0px rgba(0, 118, 188, 1); box-shadow: 4px 4px 0px 0px rgba(0, 118, 188, 1); }-moz-box-shadow: 4px 4px 0px 0px rgba(102, 205, 199, 1); box-shadow: 4px 4px 0px 0px rgba(102, 205, 199, 1); }
.share .tab-head { position: relative; }
.share .tab-head img { position: relative; display: block; width: 100%; max-width: 290px; z-index: 2; }
.share .tab-head:after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #45a19c; }
.share .tab-body { padding: 30px 60px; }

.features { position: relative; padding-top: 10px; }
.features .border { margin-right: 1%; margin-bottom: 50px; padding: 70px 0 40px; border: 5px solid #680920; border-radius: 10px; -webkit-box-shadow: 4px 4px 0px 0px rgba(176, 9, 49, 1); -moz-box-shadow: 4px 4px 0px 0px rgba(176, 9, 49, 1); box-shadow: 4px 4px 0px 0px rgba(176, 9, 49, 1); }
.feature { display: table; width: 100%; }
.feature .list { display: table-cell; width: 25%; border-right: 2px solid #c8c8c8; text-align: center; }
.feature .list:last-child { border-right: 0; }
.feature h5 { font-size: 20px; margin-top: 0; margin-bottom: 10px; color: #b10a32; }
.feature p { margin-bottom: 0; }
.feature .list.view_desktop { display: table-cell!important; }

.fullrow { margin: 30px 0 30px; }
.fullrow .inline { width: 49.3%; display: inline-block; vertical-align: top; }
.fullrow .inline img { display: block; }
.fullrow .inline h3 { font-family: "Microsoft YaHei", 敺株蔓��暺�, tahoma, arial, simsun; font-size: 26px; line-height: 30px; margin-top: 0; background-color: #ffffff; text-align: center; width: 160px; top: -7px; left: 50%; margin-left: -80px; position: absolute; }

.dlApp { text-align: center; position: relative; border: 2px solid #b00931; border-radius: 20px; margin-right: -20px; z-index: 2; background-color: #ffffff; min-height: 145px; }
.dlApp .app { display: table; margin: 10px auto 0; border-spacing: 15px; }
.dlApp .app div { display: table-cell; vertical-align: middle; border-spacing: 0; }
.dlApp .app img { width: 100%; margin: 0 auto; }
.dlApp .app .ico { width: 17%; }
.dlApp .app .ico img { max-width: 70px; margin-bottom: 2px; }
.dlApp .app .dl { width: 60%; }
.dlApp .app .dl div { display: table-cell; border-spacing: 5px; }
.dlApp .app .dl .app-store img { max-width: 109px; margin-right: 10px; }
.dlApp .app .dl .google-play img { max-width: 135px; }
.dlApp .app .qrcode { width: 23%; }
.dlApp .app .qrcode img { max-width: 93px; }
.dlApp .app .pay { color: #b00931; font-size: 14px; }
.upay { text-align: center; position: relative; border: 10px solid #b00931; border-radius: 20px; }
.upay .uapp { display: table; margin: 0 auto 0; border-spacing: 15px; }
.upay .uapp .pay { color: #b00931; font-size: 14px; }
.upay .uapp .payqr, .upay .words{ color: #333333; font-size: 14px; }
.upay .words { vertical-align: bottom; text-align: center; padding-top: 8%; }
.upay .uapp .uico { width: 46%; max-width: 120px; }
.upay .uapp .ico { width: 22%; max-width: 70px; }
.upay .uapp div { display: table-cell; vertical-align: middle; border-spacing: 0; }
.upay .uapp img { width: 100%; margin: 5px auto; }
.upay .remark { display: table; text-align: left; margin: -15px 0  10px 0; }

.floating { position: fixed; z-index: 9; width: 100%; left: 0; bottom: 0; background-color: rgba(176, 9, 49, 0.9); }
.floating.sticky { position: absolute; }
.floating .container { width: 100%; max-width: 1000px; margin: 0 auto; display: table; border-spacing: 5px; }
.floating .welcome { display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; font-weight: bold; line-height: 30px; color: #ffffff; padding: 5px 0; }
.floating .welcome strong { font-size: 30px; }
.floating .dlApp { border: 0; margin-right: 0; min-height: auto; display: table-cell; vertical-align: middle; width: 44%; }
.floating .dlApp img { display: block; }
.floating .app { border-spacing: 10px; margin-top: 0; }
.floating .app .ico { width: 17%; }
.floating .app .qrcode { width: 17%; }
.floating .app .qrcode img { max-width: 70px; }
.floating .controler { position: absolute; right: 5%; top: -30px; width: 60px; height: 30px; background-color: rgba(176, 9, 49, 0.9); background-image: url("../images/ico_close.png"); background-repeat: no-repeat; border-radius: 10px 10px 0 0; cursor: pointer; }
.floating .controler.active { background-image: url("../images/ico_open.png"); }

.offer6 { position: relative; }
.offer6 .border { margin-right: 1%; padding: 60px 0 0; border: 5px solid #680920; border-radius: 10px; -webkit-box-shadow: 4px 4px 0px 0px rgba(176, 9, 49, 1); -moz-box-shadow: 4px 4px 0px 0px rgba(176, 9, 49, 1); box-shadow: 4px 4px 0px 0px rgba(176, 9, 49, 1); }
.btn_group { text-align: center; padding-bottom: 20px;}
.hklogo, .mllogo {margin-top: 20px; }
.hklogo img, .mllogo img { display: inline-block; width: 60%; max-width: 140px; margin: 0 1% 10px; }
label img { display: inline-block; width: 40%;
margin: 0 0 10px; padding: 0; max-width: 180px;}
.mllogo table, .mllogo tr {margin: 0 auto;}
.mllogo th {padding: 5px 30px; text-align: left; font-size: 1.3em; color: #680920;}
.mllogo th:before {content: "\2022"; display: inline-block; width: 0.7em;}

input[type='radio'] {display:none;}

label.btns > img:nth-child(2) {display:none;}
input[type='radio']:checked + label.btns > img:nth-child(1) {display:none;}
input[type='radio']:checked + label.btns > img:nth-child(2) {display:inline-block;}

.btn_group input + label {
    cursor: pointer;font-size:0;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.btn_group input + label:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.7);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.7);
            filter: brightness(1.2) grayscale(.5) opacity(.7);
}
.btn_group input:checked + label{
    -webkit-filter: brightness(1) grayscale(0) opacity(1);
       -moz-filter: brightness(1) grayscale(0) opacity(1);
            filter: brightness(1) grayscale(0) opacity(1);
}

div.hklogo, div.hkdetail, div.mllogo, div.mldetail{
    display: none;
}
input.hk:checked ~ div.hklogo, input.hk:checked ~ div.hkdetail{
    display: block;
}
input.ml:checked ~ div.mllogo, input.ml:checked ~ div.mldetail{
    display: block;
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 1000px) {
    .bocpay { padding: 0 10px; }
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 767px) {
.view_desktop { display: none !important; }
.view_mob { display: block !important; }
  /*#banner_inner { background-image: url("banner_bocpay_m.jpg"); }*/
  /**/
  #content { padding-top: 10px; }
  
  .tabs { margin-top: 10px; }
  .tabs a { font-size: 16px; vertical-align: top; }
  .tabs img, .tabs span { display: block; text-align: center; }
  .tabs img { margin: 0 auto; width: 40px;}
  .tabs span { margin-left: 0; margin-top: 5px; }
  
  .seation-head { top: 25px; margin: 0 auto; }
  .seation-head img { width: 90%; }

  .offset .tab-body { padding: 15px; }
  .offset .tab-head { overflow: hidden; }
  .offset .tab-head img { margin-left: -15px; width: 80%; }
  .offset p { font-size: 16px; }

  .share .border { padding-bottom: 15px;}
  .share .tab-body { padding: 15px; }
  .share .tab-head { overflow: hidden; }
  .share .tab-head img { margin-left: -15px; width: 80%; }
  .share p { font-size: 16px; }
  
  .offer1 { margin-bottom: 20px; }
  .offer2 .tab-body { padding-top: 0; }
  
  .bullet {margin: 40px auto 20px;}
    
  .leadin { padding: 30px 15px 15px; }
  
  .table { display: block; }
  .refund, .monday { display: block; }
  .refund { padding: 0; }
  .monday { width: 50%; margin: 20px auto; }
  .monday.view_d { display: none; }
  .monday.view_m { display: block; }

  .shop_list { display: block; }
  .shop_list .logo, .shop_list .detail { display: block; padding: 20px 0; }
  .shop_list .logo { width: auto; padding-bottom: 0; padding-left: 0; text-align: center; }

  .features .border { padding: 50px 15px 15px; }
  .feature .list.view_desktop { display: none!important; }
  .feature.view_mob { display: table!important; }
  .f1 .feature { border-bottom: 2px solid #c8c8c8; padding-bottom: 20px; margin-bottom: 20px; }
  .f1 .feature .list:nth-child(2) { border-right: 0; }
  .feature .list { padding: 0 5px; width: 50%; }

  .fullrow .inline { display: block; width: auto; }
  .fullrow .inline h3 { font-size: 20px; line-height: 20px; width: 100px; margin-left: -50px; }

  .dlApp { margin-right: 0; min-height: auto; }
  .dlApp .app { border-spacing: 10px; margin: 0 auto; }
  .dlApp .app .ico { width: 22%; }
  .dlApp .app .dl { width: 78%; }
  .dlApp .app .qrcode { display: none; }
  .upay .uapp { border-spacing: 10px; }
  .dlApp .app .ico, .upay .uapp .pay, .upay .uapp .payqr, .upay .words { font-size: 12px; }
  
  .floating .welcome { font-size: 14px; line-height: 20px; }
  .floating .welcome strong { font-size: 20px; }
  .floating .dlApp { width: 36%; border-radius: 10px; }
  .floating .app  { border-spacing: 5px; }
  .floating .app .ico { width: 20%; }
  .floating .app .dl { width: 34%; }
  .floating .app .dl div { display: block; width: auto; }
  .floating .app .dl .app-store { margin-bottom: 3px; }
}

@media screen and (max-width: 365px) {
  .mllogo {font-size: 10px;}
}

@media screen and (max-width: 300px) {
  .mllogo {font-size: 9px;}
}