@charset "UTF-8";
.btn-zone { clear: both; margin: 20px auto; text-align: center; }
.btn-zone a.nbtn, .btn-zone input.nbtn, .btn-zone button.nbtn { font-weight: normal; display: inline-block; *display: inline; zoom: 1; font-size: 1.53em; font-weight: bold; line-height: 2em; color: #666666; padding: 8px 30px; border-radius: 5px; border: 1px solid #dddddd; box-shadow: 0px 1px 1px rgba(180, 178, 178, 0.5), inset 0px 0px 0px rgba(255, 255, 255, 0.7); background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 25%, #efefef); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.25, #ffffff), to(#efefef)); }
.btn-zone a.nbtn.fixed, .btn-zone input.nbtn.fixed, .btn-zone button.nbtn.fixed { width: 260px; box-sizing: border-box; }
.btn-zone a.nbtn.disabled, .btn-zone a.nbtn.disabled:hover, .btn-zone input.nbtn.disabled, .btn-zone input.nbtn.disabled:hover, .btn-zone button.nbtn.disabled button.nbtn.disabled:hover { color: #c7c7c7; cursor: not-allowed; border: 1px solid #dddddd; background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 25%, #efefef); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.25, #ffffff), to(#efefef)); }
.btn-zone.inline { display: inline-block; *display: inline; *zoom: 1; margin-top: 0; margin-bottom: 0; }
.btn-zone.inline.middle { vertical-align: middle; }
.btn-zone a.nbtn:hover, .btn-zone input.nbtn:hover, .btn-zone button.nbtn:hover { color: white; background: #f31e36; box-shadow: 0px 1px 1px rgba(180, 178, 178, 0.5), inset 0px 0px 0px rgba(255, 255, 255, 0.7); }
.btn-zone a.nbtn:hover.login-btn, .btn-zone a.nbtn:hover.lbox-btn, .btn-zone input.nbtn:hover.login-btn, .btn-zone input.nbtn:hover.lbox-btn, .btn-zone button.nbtn:hover.login-btn, .btn-zone button.nbtn:hover.lbox-btn { border: 0; color: #fff; cursor: pointer; }
.btn-zone a.focus, .btn-zone input[type=submit].focus, .btn-zone button.focus { color: white; background: #e71a0f; }
.btn-zone a:hover, .btn-zone input[type=submit]:hover, .btn-zone button:hover { text-decoration: none; }
.btn-zone a.focus:hover, .btn-zone input[type=submit].focus:hover, .btn-zone button.focus:hover { background: #f31e36; }
.btn-zone img { margin: 8px; }

.owl-carousel { -webkit-tap-highlight-color: transparent; position: relative; display: none; width: 100%; z-index: 1; }
.owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative; }
.owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; }
.owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item { min-height: 1px; float: left; -webkit-touch-callout: none; -webkit-backface-visibility: visible; backface-visibility: visible; }
.owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; }
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none; }
.owl-carousel .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.owl-carousel.owl-loaded { display: block; }
.owl-carousel.owl-loading { opacity: 0; display: block; }
.owl-carousel.owl-hidden { opacity: 0; }
.owl-carousel.owl-refresh .owl-item { display: none; }
.owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.owl-carousel.owl-grab { cursor: move; cursor: grab; }
.owl-carousel.owl-rtl { direction: rtl; }
.owl-carousel.owl-rtl .owl-item { float: right; }

.no-js .owl-carousel { display: block; }

.owl-carousel .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.owl-carousel .owl-animated-in { z-index: 0; }
.owl-carousel .owl-animated-out { z-index: 1; }
.owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; }

@-webkit-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
.owl-height { transition: height .5s ease-in-out; }

.owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity .4s ease; }
.owl-carousel .owl-item img.owl-lazy { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; }
.owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: -webkit-transform .1s ease; transition: transform .1s ease; }
.owl-carousel .owl-video-play-icon:hover { -webkit-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none; }
.owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease; }
.owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }

.owl-dots { display: block; margin: 0 auto; text-align: center; position: absolute; left: 33%; right: 0; bottom: 1em; z-index: 2; }
.owl-dots .owl-dot { display: inline-block; cursor: pointer; }
.owl-dots .owl-dot span { display: block; width: 1.25em; height: 1.25em; background: #fff; margin: 0 0.3em; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.owl-dots .owl-dot.active span { background: #000; }

.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { position: absolute; top: 50%; left: 1%; margin-top: -12px; width: 80px; height: 80px; color: transparent; background: transparent; opacity: .6; }
.owl-carousel .owl-nav .owl-prev::before, .owl-carousel .owl-nav .owl-next::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; width: 30px; height: 30px; border-left: 8px solid #FFF; border-bottom: 8px solid #FFF; box-sizing: border-box; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.owl-carousel .owl-nav .owl-prev:hover, .owl-carousel .owl-nav .owl-next:hover { opacity: 1; }
.owl-carousel .owl-nav .owl-next { left: auto; right: 1%; }
.owl-carousel .owl-nav .owl-next::before { -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

header { top: 0; z-index: 5; width: 100%; background: #FFF; }
header .container { text-align: left; }

.logo { display: inline-block; vertical-align: bottom; margin: 2em auto; text-align: center; }
.logo img { max-width: 100%; max-height: 200px; height: auto; margin: 0 auto; }
.logo img.slogo { display: none; }
.logo img.blogo { display: block; }

header::after { content: ''; display: block; clear: both; }

@media screen and (max-width: 768px) { header .logo { margin: 1.6em auto; }
  header .logo img { max-height: 40px; width: auto; max-width: 100%; box-sizing: border-box; }
  header .logo img.slogo { display: block; }
  header .logo img.blogo { display: none; } }
footer .container { text-align: center; margin: 1em auto; }
footer div { line-height: 2em; }

.top { width: 70px; height: 70px; position: fixed; bottom: 5%; right: 5%; z-index: 9999; background: url(../images/top.png) no-repeat left top; display: none; }
.top.show { display: block; }

@media screen and (max-width: 768px) { footer { font-size: 0.92em; } }
body { font-size: 100%; color: #474747; margin: 0 auto; line-height: 1.5em; font-size: 13px; }

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input { font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif; }

.clearboth, .clearfix { clear: both; }

.wrapper { position: relative; }

a { color: #1d72bb; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; color: #368bdf; }
a.underline { text-decoration: underline; }

.container { max-width: 940px; width: 100%; margin: 0 auto; box-sizing: border-box; }

.mobile-menu { display: none; }

/* visible, hidden rwd */
.center-block { display: block; margin-right: auto; margin-left: auto; }

.pull-right { float: right !important; }

.pull-left { float: left !important; }

.hide { display: none !important; }

.show { display: block !important; }

.invisible { visibility: hidden; }

.text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

.hidden { display: none !important; }

.affix { position: fixed; }

.inline-group > * { display: inline-block; }
.inline-group .cut2 { width: 50%; float: left; }
.inline-group:after { clear: both; content: ''; display: block; }

input[type="tel"] { line-height: 3.2em; height: 3.2em; border: 1px solid #dadada; box-shadow: none; background-color: #FDFDFD; box-sizing: border-box; padding: 0 1em; font-size: 1.07em; -webkit-appearance: none; border-radius: 0; -webkit-transition: border-color .15s linear,box-shadow .15s linear; -moz-transition: border-color .15s linear,box-shadow .15s linear; -ms-transition: border-color .15s linear,box-shadow .15s linear; -o-transition: border-color .15s linear,box-shadow .15s linear; transition: border-color .15s linear,box-shadow .15s linear; }
input[type="tel"]:focus { background-color: #fff; outline: 0; border-color: #66afe9; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
input[type="tel"]:disabled { background-color: #e4e4e4; border-color: #dadada; webkit-box-shadow: none; box-shadow: none; -webkit-opacity: 1; }
input[type="tel"].error { border-color: #e71a0f; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(245, 89, 89, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(245, 89, 89, 0.6); }

@-ms-viewport { width: device-width; }
i { color: #e71a0f; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.outer_container { max-width: 940px; width: 100%; margin: 0 auto; box-sizing: border-box; }

.ftable ul { display: table; width: 100%; }
.ftable li { display: table-row; }
.ftable h3 { display: table-cell; }
.ftable .td { display: table-cell; }

section.orderinfo { margin: 0em auto 2em auto; border-radius: 8px; background: #f8f8f8; box-sizing: border-box; padding: 0.2% 2.5% 0.2% 5%; width: 45%; float: left; }
section.orderinfo h2 { font-weight: bold; border-bottom: #535353 1px solid; font-size: 1.53em; padding: 4.7% 0; }
section.orderinfo h3 { color: #959595; border-bottom: #acacac 1px solid; padding: 1.38em 0; white-space: nowrap; }
section.orderinfo .td { font-size: 1.23em; border-bottom: #acacac 1px solid; padding: 1.38em 0; padding-left: 2%; word-break: break-all; }
section.orderinfo li:last-child h3, section.orderinfo li:last-child .td { border-bottom: none; }

section.cardinfo { margin: 0em auto 2em auto; border-radius: 8px; background: #FFF; box-sizing: border-box; width: 55%; float: left; box-shadow: 0px 0px 3px 1px #dbdada; border: #dbdada 1px solid; margin-left: -10px; }
section.cardinfo ul { padding: 0 5%; box-sizing: border-box; margin-bottom: 1em; margin-top: .3em; }
section.cardinfo h2 { font-weight: bold; font-size: 1.53em; padding: 3.6% 5%; background: #0a7dea; color: #FFF; border-top-left-radius: 8px; border-top-right-radius: 8px; }
section.cardinfo h3 { color: #959595; padding: .7em 0; line-height: 3.5em; white-space: nowrap; text-align: right; vertical-align: top; }
section.cardinfo .td { padding: .7em 0; padding-left: 1%; line-height: 1.8em; vertical-align: middle; }
section.cardinfo .td input ~ span { padding-left: 0.5em; /*20180514*/ }
section.cardinfo .data { position: relative; }
section.cardinfo li.code h3, section.cardinfo li.code .data { border-bottom: none; }
section.cardinfo li.code input { padding-right: 4em; }
section.cardinfo li.code .data:after { display: block; content: url(../images/input_code.png); position: absolute; right: 1em; top: 0; bottom: 0; vertical-align: middle; margin: auto; padding: .7em 0; }
section.cardinfo li:first-child .data { border: 1px solid #dadada; box-shadow: none; background-color: #FDFDFD; box-sizing: border-box; padding: .2em 1em; -webkit-transition: border-color .15s linear,box-shadow .15s linear; -moz-transition: border-color .15s linear,box-shadow .15s linear; -ms-transition: border-color .15s linear,box-shadow .15s linear; -o-transition: border-color .15s linear,box-shadow .15s linear; transition: border-color .15s linear,box-shadow .15s linear; display: table; }
section.cardinfo li:first-child .data.active { background-color: #fff; outline: 0; border-color: #66afe9; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
section.cardinfo li:first-child .data.disabled { border-color: #dadada; background-color: #e4e4e4; -webkit-box-shadow: none; box-shadow: none; -webkit-opacity: 1; }
section.cardinfo li:first-child .data.error { border: #e71a0f 1px solid; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(245, 89, 89, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(245, 89, 89, 0.6); }
section.cardinfo li:first-child .data:after { display: block; content: url(../images/input_card.png); position: absolute; right: 1em; top: 0; bottom: 0; vertical-align: middle; margin: auto; padding: .7em 0; }
section.cardinfo li:first-child .data.visa:after { display: block; content: url(../images/visa.png); }
section.cardinfo li:first-child .data.master:after { display: block; content: url(../images/master.png); }
section.cardinfo li:first-child .data.jcb:after { display: block; content: url(../images/jcb.png); }
section.cardinfo li:first-child input { margin-right: .5em; padding: 0; width: 10%; border: none; text-align: left; }
section.cardinfo li:first-child input:focus, section.cardinfo li:first-child input.error, section.cardinfo li:first-child input .disabled { box-shadow: none; -webkit-opacity: 1; }
section.cardinfo .cut2 input { width: 60%; min-width: 100px; }
section.cardinfo .full input { width: 100%; }
section.cardinfo input { text-align: center; }

.note { color: #858585; margin: 2.5em auto 5em auto; }
.note h3 { font-size: 1.07em; font-weight: bold; }
.note ul li { list-style: disc; }
.note ul { margin-left: 20px; }

.error_info { font-size: 0.92em; color: #e71a0f; height: 1.2em; height: 1.2em; }

.term-block, .card-autherized { width: 94%; max-width: 500px; box-sizing: border-box; background-color: #FFF; padding: 2em 1.5em; text-align: center; font-size: 1.15em; display: none; }
.term-block .left, .card-autherized .left { text-align: left; }

.lightbox_block p { line-height: 2em; }
.lightbox_block img { margin: .5em auto; }
.lightbox_block .btn-zone { margin: 1em auto 0 auto; font-size: 0.8em; }
.lightbox_block .btn-zone a.nbtn, .lightbox_block .btn-zone input.nbtn, .lightbox_block .btn-zone button.nbtn { padding: 4px 30px; }

.wrap-table { width: 1000px; width: 100vw; vertical-align: middle; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; }

.inner-table { display: inline-block; text-align: left; }

.processsing { display: inline-block; width: 94%; max-width: 500px; box-sizing: border-box; background-color: #fafafa; padding: 3em 1.5em; text-align: center; font-size: 1.15em; }
.processsing p { line-height: 2em; }
.processsing img { margin: 1em auto; }

.errorblock { display: inline-block; width: 94%; max-width: 520px; box-sizing: border-box; padding: 1em 1.5em; text-align: left; margin: 0 auto; min-height: 550px; color: #666666; }
.errorblock p { line-height: 1.6em; }
.errorblock img { margin: 1em auto; }

.center { text-align: center; }

.error-zone img { display: inline-block; vertical-align: middle; }
.error-zone div { display: inline-block; margin-left: 15px; width: 280px; vertical-align: middle; text-align: left; }
.error-zone h2 { line-height: 2.6em; font-size: 1.23em; color: #be4942; border-bottom: #be4942 1px solid; margin-bottom: 15px; }
.error-zone p { line-height: 2em; }

.article { text-align: left; text-align: justify; text-justify: inter-ideograph; }

.cardscon { text-align: center; margin: 25px auto; clear: both; }

input[type="checkbox"] { vertical-align: top; position: relative; bottom: 1px; margin-right: 0.4em; }

.ico_othercards { background: url(../images/mccard_ico.png) no-repeat left center; padding-left: 20px; line-height: 1.5em; display: inline-block; text-decoration: underline; }
.ico_othercards:hover { text-decoration: underline; }

@media screen and (max-width: 768px) { body { font-size: 12px; }
  input[type="tel"] { line-height: 2em; height: 2em; padding: 0 4%; }
  .container { width: 100%; box-sizing: border-box; padding: 0 .8em; max-width: 640PX; }
  .outer_container { width: 100%; box-sizing: border-box; padding: 0 .8em; max-width: 640PX; }
  .error_info { font-size: 0.92em; color: #e71a0f; display: none; }
  .error_info.mshow { display: block; }
  section.cardinfo { float: none; width: 100%; margin: .7em auto; }
  section.cardinfo.ftable ul { display: table; }
  section.cardinfo.ftable li { display: block; }
  section.cardinfo.ftable h3 { display: none; }
  section.cardinfo.ftable .td { display: block; }
  section.cardinfo h2 { font-size: 1.25em; }
  section.cardinfo ul { padding: 0 2%; }
  section.cardinfo h3 { display: none; }
  section.cardinfo .data { padding-left: 0; }
  section.cardinfo .data input ~ span { padding-left: 0.5em; /*20180514*/ }
  section.cardinfo li .td { padding-left: 0; }
  section.cardinfo li.code { width: 50%; float: left; }
  section.cardinfo li.code input { padding-right: 3em; }
  section.cardinfo li.code .data:after { background: url(../images/input_code.png) no-repeat center; background-size: 28px 18px; display: inline-block; width: 28px; height: 18px; content: ""; }
  section.cardinfo li.code .error_info { display: none; }
  section.cardinfo li.date { width: 50%; float: left; }
  section.cardinfo li.date .cut2 input { width: 45%; min-width: 34px; }
  section.cardinfo li.date .cut2 { width: 50%; }
  section.cardinfo li.date .cut2.right { width: 50%; }
  section.cardinfo li:first-child .data { padding: .2em .5em; }
  section.cardinfo li:first-child .data:after { background: url(../images/input_card.png) no-repeat center; background-size: 91px 18px; display: inline-block; width: 91px; height: 18px; content: ""; }
  section.cardinfo li:first-child .data.master:after { display: block; background: url(../images/master.png) no-repeat center; background-size: 91px 18px; display: inline-block; width: 91px; height: 18px; content: ""; }
  section.cardinfo li:first-child .data.visa:after { display: block; background: url(../images/visa.png) no-repeat center; background-size: 91px 18px; display: inline-block; width: 91px; height: 18px; content: ""; }
  section.cardinfo li:first-child .data.jcb:after { display: block; background: url(../images/jcb.png) no-repeat center; background-size: 91px 18px; display: inline-block; width: 91px; height: 18px; content: ""; }
  section.cardinfo li:first-child input { width: 12%; }
  section.cardinfo li.error_info { display: none; }
  section.cardinfo li.error_info.mshow { display: table-row; }
  section.cardinfo.lang_en li.date span { padding-left: 0 !important; /*20180514*/ }
  section.orderinfo { width: 100%; margin: 0 auto .7em auto; padding: 0.2% .8em .4em .8em; float: none; }
  section.orderinfo h2 { font-size: 1.25em; padding: .8em 0; }
  section.orderinfo h3, section.orderinfo .td { padding: .5em 0; }
  section.orderinfo h3 { white-space: nowrap; }
  section.orderinfo .td { word-break: break-all; }
  .note { margin: 1em auto; }
  .btn-zone a.nbtn, .btn-zone input.nbtn, .btn-zone button.nbtn { font-size: 1.25em; }
  .error-zone { text-align: center; margin-bottom: 2em; }
  .error-zone img { display: block; vertical-align: middle; }
  .error-zone div { display: block; margin-left: 0px; width: 100%; text-align: left; }
  .cardscon { margin: 5vw auto; text-align: center; }
  .cardscon > p { margin: 0 auto; display: inline-block; text-align: left; } }