@charset "utf-8";
/* CSS Document */
/* Art Tangency Creation - 天井創意 CaGe Wei @art-tangency.com */

/* ============= Setting ============= */
body {width:100%; max-width:1024px; margin:0px auto; background:#f0f4fa;}
h1, h2, h3 {box-sizing:border-box; padding:10px 0px; line-height:140%;}
h1 {font-size:1.8em; font-weight:700; letter-spacing:1px;}
h2 {font-size:1.4em; font-weight:600;}
h3 {font-size:1.1em; font-weight:600;}
hr {height:1px; background:#666;}
input, textarea, select, option {outline:none; padding:2px 5px; -moz-appearance:none; -webkit-appearance:none; appearance:none;}
input[type="submit"], input[type="button"] {cursor:pointer; font-size:1rem;}
.height_F {/*Full Height @ at_cage.js*/}
.height_F2 {/*Full Height - header @ at_cage.js*/}
/* ============= Basic ============= */
input {padding:5px 10px; line-height:160%; color:#222222;}
input[type='radio'] {width:30px; height:30px; margin:5px;}
input[type='submit'] {padding:5px 20px; background:#333; color:#fefefe; line-height:160%;}
input[type='submit']:hover {background:#000; color:#fff;}
select {
	width:100%; padding:4px 0px;
	text-align-last:left; color:#222222; font-size:1rem; line-height:40px;
	background:url(../images/ico/arrow_expand@2x.png) no-repeat right center; background-size:15px;
	background-position:98% 50%;
}
select.selected {color:#65CA56;}
select::-ms-expand {display:none;}
::-webkit-input-placeholder {color:#999;font-size:0.9rem;}
:-moz-placeholder {color:#999;font-size:0.9rem;;}
::-moz-placeholder {color:#999;font-size:0.9rem;;}
:-ms-input-placeholder {color:#999;font-size:0.9rem;;}

div, img, i {-moz-user-focus:none; -webkit-user-focus:none; -moz-user-select:none; -webkit-user-select:none;}
a, input {
	-webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
	user-select:none;
}
i[class^="btn_"],i[class*="btn_"],i[class^="ico_"],i[class*="ico_"] {
	background-repeat:no-repeat; background-position:50% 50%; display:block; position:relative;
}

/* var data */
/* :root {
	--header-height:44px;
	--contentHeader-height:54px;
	--nav-iconH:32px;
	--navside-height:calc(0px + 54px);
	--popHeader-height:40px;

	--color-greenlight:#65CA56;
	--color-blue:#35AAFF;
	--color-bluedeep:#2E85EA;
	--color-yellow:#FFCE1E;
	--color-red:#FF4145;
	--color-purple:#9672FF;
	--color-gray:#94a3ae;
	--color-graylight:#F5F5F5;
	--color-graydeep:#222222;
	--color-line:#dadcde;
} */
.clr_red {color:#FF5847 !important;}
.clr_blue{color:rgb(9,148,221);}

/* ============= Model ============= */
.scrollfalse {
	/* overflow:hidden;
	touch-action: none; */
	height:100%; 
	position:fixed;	
	left: calc(50% - 512px);
}
#main {width:100%; margin:0; padding:0; background:none; position:relative;}

.Alert_device {
	width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:9999; 
	background:#2E85EA; color:#ececec; text-align:center;
}
.Alert_device p {padding-top:45vh;}

section hr.innerLine {height:8px; margin-top:20px; background:#f0f4fa;}

.CG_scorll, .smooth_scorll {overflow:auto; -webkit-overflow-scrolling:touch; height:auto;}
.CG_scorll::-webkit-scrollbar {width:4px;}
.CG_scorll::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px #fff; 
	-moz-box-shadow: inset 0 0 5px #fff; 
	-o-box-shadow: inset 0 0 5px #fff; 
	box-shadow: inset 0 0 5px #fff;
}
.CG_scorll::-webkit-scrollbar-thumb {
	background-color:#dadcde; outline:1px solid #dadcde; border-radius:5px;
}

.cssFlex {}
ol.cssFlex li {text-align:center;}

p.note {font-size:0.9rem; color:#4a4a4a;}
h3 > .note {margin-left: 5px; font-size: 0.8rem; font-weight: 500; color: #94a3ae;}

/*  LightBOX  */
.popModel {
	top:0px; left:0px; position:fixed; display:none; pointer-events:fill;
	width:100%; height:100%; z-index:999; background:rgba(0,0,0,0.7); -webkit-touch-callout:none;
}
.popCont {
	background:#fff; font-size:1rem; color:#000; line-height:140%; padding:0;
	width:100%; padding-top:0px;
	position:fixed; top:44px; bottom:0; left:0;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.btn_openPop {
}
.btn_closePop {
	width:40px; height:40px; cursor:pointer;
	display:block; float:right; position: relative;
	background:url(../images/ico/arrow_copy_1.png) no-repeat 0% 100%; background-size:24px; 
}
.btn_closePop:hover {
	color:#fff;
}

.popCont > section, .popCont .cssTable {width:100%;}
.popCont > section.popHeader {
	height:40px; line-height:40px; padding:0; margin-bottom:0px;
	background:none;
}

.popCont > section.popSelectList {padding:0px 0px 0px 24px; height:calc(100% - 40px); overflow-x:hidden; overflow-y:scroll;}
.popCont > section.popSelectList ul li {
	vertical-align:middle; padding:10px 0px 10px 0px;
	border-bottom:1px solid; border-color:#dadcde;
}
.popCont > section.popSelectList ul li.listData,
.popCont > section.popSelectList ul li.listDataNext {cursor:pointer;}
.popCont > section.popSelectList ul li.listNote {width:4em; text-align:center;}
.popCont > section.popSelectList ul li.listCtrl {width:50px; padding-right:5px;}
.popCont > section.popSelectList p {
	font-size:1rem; line-height:140%; padding:0; margin-bottom:4px;
}
.popCont > section.popSelectList p + span {
	font-size:0.9rem; line-height:140%; padding:0; 
	display:block; color:#94a3ae;
}
.popCont > section.popSelectList a {color:#35AAFF;}
.popCont > section.popSelectList.threeColl .listData > * {display: inline-block; vertical-align: top; font-size: 0.85rem;}
.popCont > section.popSelectList.threeColl .listData > *:nth-child(2n+1){width: 39%;}
.popCont > section.popSelectList.threeColl .listData > *:nth-child(2n+2){width: 60%;}
.popCont > section.popSelectList.threeColl ul li.listCtrl {width: 45px;}

.listNote a {font-size:0.9rem; vertical-align:middle;}
.listNote a i.ico_time {
	display:inline-block; width:13px; height:13px; vertical-align:middle; margin-right:5px;
	background-position:50% 0%;
	background-size:12px;
}
.listCtrl a i.btn_delet {height:40px; background-size:16px;}

.popCont section.footerBTN {position: fixed; left: 0; bottom: 0; margin-bottom: 20px;}

#popQRcode .popCont,
#popBarcode .popCont{background: rgba(255,255,255,0.85);}
#popQRcode .popCont section, #popQRcode article,
#popBarcode .popCont section, #popBarcode article  {background: none;}
.qrcodeBox {display: flex; align-items: center;}
.qrcodeBox article {text-align: center;}
.qrcodeBox .qrcodeBlock {width: 100%; max-width: 320px; margin: 30px auto 20px;}
.qrcode_view {margin: 0 auto; width: 100%; height: calc(50% - 10px);}
.qrcode_view + p {margin: 10px 0;}
.qrcode_view img {width: 100%; height: 100%;}
.qrcodeNote {margin: 1rem auto 0; width: 100%; max-width: 320px;}
.qrcodeNote h4 {text-indent: -1.3em; padding-left: 1.3em;}
.reloadBox a {width: 60px; height: 60px; display: block; margin: auto;}
.reloadBox i.btn_reload {width: 60px; height: 60px; margin: auto; top: 0; background-size: contain;}

.popModel .popImg div {width: 90%; max-width: 500px; margin: 15% auto; box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);}

#popPrivate .popCont > .atcl_private {height: calc(100% - 40px);}

.alertModel {
	width:100%; height:100vh; position:fixed; top:0; left:0; z-index:9;
	background-color:rgba(0,0,0,0.2);
}
.alertModel .alertCont {
	width:270px; padding:16px; border-radius:14px; box-sizing:border-box;
	position:fixed; top:40vh; left:calc(50vw - 135px);
	background:#ffffff;
}
.alertModel .alertCont h4 {
	font-size:1.2rem; font-weight:bold; line-height:22px; height:22px; text-align:center; letter-spacing:0.4px; color:#000000;
}
.alertModel .alertCont p {font-size:0.8rem; line-height:160%; font-weight:normal; color:#000000; padding:10px 0px 0px;}
.alertModel .alertCont .btnArea {padding:24px 0px 0px;}

#alertMsg_packageMore {display: none;}
#alertMsg_enterInfo {display: none;}
#alertMsg_searchErr {display: none;}
#alertMsg_enterInfo {display: none;}

.btnArea input[type="button"].btnColor_wt,
.btnArea input[type="submit"].btnColor_wt {color:rgb(146,146,146); background-color:#fff; border:none;}
.btnArea input[type="button"].btnColor_red,
.btnArea input[type="submit"].btnColor_red {color:#fff; background-color:rgb(255,65,69); border:none;}
.btnArea input[type="button"].btnColor_green,
.btnArea input[type="submit"].btnColor_green {color:#fff; background-color:rgb(69,175,53); border:none;}

/* nav icon */
i.btn_navFpay {background-image:url(../images/navicon/FamiPay.png);}
i.btn_navHome {background-image:url(../images/navicon/Home_none.png);}
i.btn_navHome.active {background-image:url(../images/navicon/Home_active.png);}
i.btn_navBarc {background-image:url(../images/navicon/Barcode_none.png);}
i.btn_navBarc.active {background-image:url(../images/navicon/Barcode_active.png);}
i.btn_navFunc {background-image:url(../images/navicon/Function_none.png);}
i.btn_navFunc.active {background-image:url(../images/navicon/Function_active.png);}
i.btn_navMemb {background-image:url(../images/navicon/Member_none.png);}
i.btn_navMemb.active {background-image:url(../images/navicon/Member_active.png);}

/* icon */
i.pointRed::after {
	content:''; width:6px; height:6px; display:block; position:absolute; 
	background:#e00; -webkit-border-radius:5px; border-radius:5px;
}

i.btn_hderBack {background-image:url(../images/ico/arrow4@2x.png);}
i.btn_hderTicket {background-image:url(../images/ico/notification2_copy@2x.png);}

i.btn_delet {background-image:url(../images/ico/delete@2x.png)}
i.btn_cancleX {background-image:url(../images/ico/cancel.png);}

i.btn_func {background-image:url(../images/ico/menu.png);}
i.btn_closeNav {background-image:url(../images/ico/arrow_copy_1.png);}

i.btn_reload {background-image:url(../images/ico/rotate@3x.png);}

i.ico_time {background-image:url(../images/ico/time.png);}
i.ico_img {background-image:url(../images/ico/sub_button_pic.png);}
i.ico_edit {background-image:url(../images/ico/edit.png);}
i.ico_arrowD {background-image:url(../images/ico/arrow_expand.png);}
i.ico_arrowR {background-image:url(../images/ico/arrow.png);}
i.ico_search {background-image:url(../images/ico/magnifying-glass.png);}
i.ico_correctGray {background-image:url(../images/ico/correct_gray.png);}
i.ico_checkGreen {background-image:url(../images/ico/check@2x.png);}
i.ico_checkLine {background-image:url(../images/ico/check_line_16x16@2x.png);}
i.ico_failRed {background-image:url(../images/ico/checkfail@2x.png);}
i.ico_mobile {background-image:url(../images/ico/phone@2x.png);}

i.ico_shipbox {background-image: url(../images/ico/delivery_1.png);}
i.ico_shipboxgray {background-image: url(../images/ico/delivery_1_gery.png);}
i.ico_point {background-image: url(../images/ico/point_2_copy_2.png);}
i.ico_giftcard {background-image: url(../images/ico/gift_card.png);}
i.ico_codepayment {background-image: url(../images/ico/ico_codepayment.png);}
i.ico_mbpayment {background-image: url(../images/ico/delivery_2.png);}

/* over line */
.ovLine {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ovLineM {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}/*IE 無理*/

/* ============= Index ============= */
.index{
}



/* ============= Inner ============= */
article {width:100%; padding:24px; vertical-align:baseline; background:#fff;}
article > h4 {color:#000; margin-bottom:8px; vertical-align:baseline;}
article > p {font-size:0.95rem; color:#4a4a4a; vertical-align:baseline;}
article b {font-weight:600; vertical-align:baseline;}
article span {vertical-align:baseline;}
article figure {width:100%; height:calc(100vw * 0.34); margin:40px auto 24px;
	background-repeat:no-repeat; background-position: 50% 50%; background-size:contain;}
article.atcl_private {
	padding:24px 24px 150px; text-align:center;
}
.atcl_private h2 {font-size:1.1rem; margin-bottom:5px;}
.atcl_private h2 + p {font-size:0.9rem; color:#94a3ae; font-weight:normal; margin-bottom:24px;}
.atcl_private div {text-align:left;}
.atcl_private div h3 {font-size:1.1rem; color:#222222; margin-bottom:5px;}
.atcl_private div p {font-size:1rem; font-weight:normal; line-height:160%; color:#94a3ae; margin-bottom:15px;}

#main section.footerBTN {position:fixed; left:0; bottom:110px; margin-bottom:0px;}
section.footerBTN.bgTrans {background:transparent;}
#main article.atcl_private + form section.footerBTN {bottom:0;}
section.footerBTN label + .btnArea {padding-top:20px;}

article.noPadding {padding: 0;}
article.mgbottom {margin-bottom: 8px;}
article.noBg {background:transparent;}
article.attention p {font-size:0.9em; line-height: 1.2em; text-indent: -1em; padding-left: 1em;}
article .note {margin-bottom: 10px; color:#94a3ae; font-size:0.9em; line-height: 1.2em;}

section {width:100%; padding:16px 24px; background:#fff; margin-bottom:8px;}
section.noBottom {margin-bottom:0px;}
section.noRightside {padding-right:0px;}
section.commentPG {background: none; padding: 5px 24px;}
section.commentPG span {color: #94a3ae; font-size: 0.8em; text-align: justify; display: block; line-height: 140%;}
section.commentPG._list span {text-indent: -1.3em; padding-left: 1.3em;}
section hr {background-color:#dadcde; margin-bottom:8px;}

section div.subSection {display:none;}
section div.subSection.active {display:block;}

section h3 {color:#000;}
section h3 + span {color:#94a3ae; font-size:0.9rem;}
a.noteBtn_blue {color:rgb(9,148,221); font-size:0.8rem; display:block; float:right;}
a.noteBtn_green {color:#65CA56; font-size:0.8rem; display:block; float:right;}
a.noteBtn_blue i.ico_time,
a.noteBtn_blue i.ico_img,
a.noteBtn_blue i.ico_edit,
a.noteBtn_blue i.ico_correctGray,
a.noteBtn_blue i.ico_arrowR,
a.noteBtn_green i.ico_checkGreen {
	display:inline-block; width:13px; height:13px; margin-left:5px; vertical-align:middle; 
	background-position:50% 0%;
	background-size:12px;
}
a.noteBtn_green i.ico_checkGreen {margin-left:0; margin-right: 5px;}
a.noteBtn_blue i.ico_arrowR {
    -webkit-transform:rotate(180deg);
       -moz-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
         -o-transform:rotate(180deg);
            transform:rotate(180deg);
}

section label {display:block; position:relative;}
section label > p, section label.toCol > * > p {font-size:0.9rem; margin-bottom:5px; padding-top:15px;}
section label input {width:100%; background:#f5f5f5; border:none; border-radius:8px; margin-bottom:5px;}
section label input[type="checkbox"], section label input[type="radio"] {
	width:28px; height:28px; background:#fff;
	border-radius:15px; border:1px solid #dadcde; 
	margin: 0 10px 0 0;
}
section label input[type="checkbox"]:checked,
section label input[type="checkbox"].active,
section label input[type="radio"]:checked,
section label input[type="radio"].active {
	background:url(../images/ico/check@2x.png) no-repeat 50% 50%; background-size:26px;
}
section label input[type="checkbox"] + span,
section label input[type="radio"] + span {color:rgba(74,73,74); line-height:300%; vertical-align:inherit;}
section label input[type="radio"] + span::after {
	content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}
section label.togRadio, section label.togRadio > div {align-items: center;}
section label.togRadio {padding: 10px 0;}
section label.togRadio input[type="radio"] + span {line-height: 100%;}
section label.togRadio a {display: block; width: 55px; font-weight: 600;}
section label + span {width:100%; display:block; font-size:0.8rem; color:#94a3ae; margin-bottom:5px;}

section label > select {width:100%; border-bottom:1px solid; border-color:#dadcde;}
section label > select + p  {}

.btnArea {width:100%; display:flex;}
.btnArea input[type="reset"],
.btnArea input[type="button"],
.btnArea input[type="submit"] {
	width:100%; margin-right:10px; padding:7px 0px; text-align:center;
	color:#fff; background:#45af35; border:1px solid #45af35;
	border-radius:8px;
}
.btnArea input[type="button"].sideBTN,
.btnArea input[type="submit"].sideBTN {color:#45af35; background:#ffffff;}
.btnArea input[type="reset"].grayBTN,
.btnArea input[type="button"].grayBTN,
.btnArea input[type="submit"].grayBTN {color:#ffffff; background:#94a3ae; border:1px solid #94a3ae;}
.btnArea input[type="reset"]:last-child,
.btnArea input[type="button"]:last-child,
.btnArea input[type="submit"]:last-child {margin-right:0px;}

.dataBlock {font-size:1rem; line-height:200%; padding:0px 0px 10px;}

.selectPGNB {overflow-x:scroll;}
.selectPGNB a {min-width:10%; padding-bottom:10px;}
.selectPGNB a > i {
	width:2.6rem; height:2.6rem; line-height:2.6rem; text-align:center; display:block; margin:0px auto;
	-webkit-border-radius:1.5em; border-radius:1.5em;
}
.selectPGNB a > i.selected {color:#fff; background-color:#35AAFF;}

/* 頁籤 */
#contentSelector {border-bottom:1px solid; border-color:#dadcde; background-color:#fff; margin-bottom:8px;}
#contentSelector ol {}
#contentSelector ol li {text-align:center; line-height:35px;}
#contentSelector ol li a {
	color:#222222; padding:5px 0px; display:inline-block; border-color:transparent;
	transition:border-color 0.3s ease-in;
}
#contentSelector ol li a.active {font-weight:bold; border-bottom:3px solid; border-color:#65CA56;}
#contentSelector + section {padding-top:14px;}
#contentSelector.noBottom {margin-bottom:0px;}

#storeSelector {}
#storeSelector ol {}
#storeSelector ol li {position:relative;}
#storeSelector p {width:100%; line-height:200%; color:#94a3ae;}
#storeSelector p.selected {color:#65CA56;}
#storeSelector p span {font-size:0.9rem;}
#storeSelector p span + i {width:10px; height:10px; display:inline-block; margin-left:5px; background-size:10px;}
#storeSelector select {width:100%; line-height:200%; opacity:0; position:absolute; left:0; top:0;}
#storeSelector li:last-child select {width:100%;}

#storeSearchMeth {}
#storeSearchMeth > div {display:none; width:100%;}
#storeSearchMeth > div.active {display:table;}

#storeSearchMeth ul.searchPad li {padding-top:5px;}
ul.searchPad {width:100%;}
ul.searchPad li {}
ul.searchPad li.searchInput {width:calc(100% - 60px);}
ul.searchPad li.searchBTN {width:60px;}
ul.searchPad li.searchInput input {width:calc(100% - 40px); background:none; display:inline-block;}
ul.searchPad li.searchBTN input {width:100%; background:none; color:#222222;}
ul.searchPad li.searchInput p {
	background:#F5F5F5; color:#222222;
	border-radius:6px; padding:0px 8px;
}
ul.searchPad li.searchInput i {display:inline-block; vertical-align:middle;}
ul.searchPad li.searchInput i.ico_search {width:1em; height:35px; background-size:16px;}
ul.searchPad li.searchInput i.btn_cancleX {width:1em; height:35px; background-size:16px; float:right;}

.storeMapCont {width:100%; height:calc(100vh - 57px);}
.storeMapCont iframe {width:100%; height:inherit;}

/* payment page */
article.shippingCar {position: relative;}
.shippingCar h3 {font-size:2rem; margin-bottom:10px;}
.shippingCar p {margin-bottom:10px;}
.shippingCar p b {font-weight: 500;}

.shippingCar_view {background-image:url(../images/img/delivery-truck@3x.png);}
.laundry_view {background-image:url(../images/img/laundry@3x.png);}
.postbag_view {background-image:url(../images/img/check_mailbox@3x.png);}
.buycard_view {background-image:url(../images/img/check_giftcard@3x.png);}
.gfcard01_view {background-image:url(../images/img/gift_card@2x.png); height: calc(100vw * 0.48); max-height: 200px;}
.gfcard02_view {background-image:url(../images/img/mfp_giftcard_02.png); height: calc(100vw * 0.48); max-height: 200px;}
.codepayment_view {background-image:url(../images/ico/ico_codepayment@2x.png); height: 120px;}
.barcode_view {background-image:url(../images/img/img_barcode.png);}
.qrcode_view {background-image:url(../images/img/img_qrcode.png);}

/* qrcode page */
article.qrcodePg {padding: 40px 24px 24px;}
.qrcodepg_view {height: calc(100vw * 0.5); background-image:url(../images/img/bill_qrcode@3x.png); max-height: 230px;}

section.qrcodePg {padding: 12px 24px;}
section.qrcodePg:first-child {margin-top: 8px;}
section.qrcodePg h3 {padding: 0;}
section.qrcodePg h3 a * {display: inline-block; vertical-align: middle;}
section.qrcodePg h3 a span:first-child i {background-size: contain;}
section.qrcodePg h3 a span:last-child {width: 30%; font-size: 1rem; font-weight: normal; color: #94a3ae;}
section.qrcodePg i[class^="ico_"] {width: 32px; height: 32px;}
section.qrcodePg i.ico_arrowD.action {-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}

section.qrcodePg + article.subSection {margin-top: -8px; margin-bottom: 8px; padding: 0; display: none;}
.subSection {position: relative;}
.subSection ul {position: relative; padding: 15px 24px; border-top: 1px solid #dadcde;}
.subSection li h4 {line-height: 170%; font-size: 0.9rem;}
.subSection li h3 {font-size: 1rem;}
.subSection li p {line-height: 170%; font-size: 0.9rem; color: #94a3ae;}
.subSection li span {line-height: 170%; font-size: 0.8rem; color: #94a3ae;}
.subSection li .statusTag {position: absolute; right: 24px; top: 15px; font-size: 0.8rem; padding: 0.05rem 0.4rem; border: 1px solid #94a3ae; -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px;}
.subSection .infoSec li {padding-left: 10px; border-left: 5px solid;}
.subSection .infoSec li h4 {width: 60%;}
.subSection .btnSec {padding: 0 24px;}
.subSection .btnSec li:not(:last-child) {width: 75px;}
.subSection .btnSec li a {display: inline-block; width: 75px; padding: 13px 0 5px; border-bottom: 4px solid transparent;}
.subSection .btnSec li a:hover,
.subSection .btnSec li a.active {border-color: #45af35;}
.subSection .btnSec li i {width: 100%; height: 24px; background-size: contain;}
.subSection .btnSec li i + span {width: 100%; display: block; text-align: center;}
.subSection .btnSec li i.ico_code {background-image: url(../images/ico/barcode@2x.png);}
.subSection .btnSec li i.ico_info {background-image: url(../images/ico/info@2x.png);}
.subSection .btnSec li i.ico_del {background-image: url(../images/ico/delete@2x.png); background-size: auto 83%;}
.subSection .codeSec li {width: 100%; padding: 40px 36px; box-sizing: border-box; display: none;}
.subSection .codeSec li figure {margin: 0 auto; height: calc(100vw * 0.55); max-height: 280px;}
.subSection .codeSec li h4 {text-indent: -1.1em; padding-left: 1em;}
.subSection .codeSec#cont_code li.block_code {display: block;}
.subSection .codeSec#cont_info li.block_info {display: block;}

/* 搜尋列 -- 禮物卡開始更換為通用class命名 */
.searchSelector.noBottom {border-bottom: 1px solid; border-color: #dadcde;}
.searchSelector .search ul.searchPad li.searchInput .btn_cancleX {display: none;}
.searchSelector .search ul.searchPad li.searchInput .btn_cancleX.active {display: block;}

/* POP */
#alertGfcardPay .alertCont {top: 25vh;}

/* 小計頁面 */
.countList {}
.countList input {width: 45%; min-width: 60px; padding: 5px; margin: 0 6px; font-size: 0.9em; line-height: 25px; background: #f5f5f5; text-align: center; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px;}
.countList.cssFlex {align-items: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #dadcde;}
.countList li.qua > * {display: inline-block; vertical-align: middle; text-align: center;}
.countList li i {width: 30px; height: 30px; font-size: 1.1rem; -webkit-border-radius: 60%; border-radius: 60%; border: 1px solid #35AAFF; background: none; line-height: 30px; color: #35AAFF;}

.subtotal {}
.subtotal li {font-size: 1.1rem; vertical-align: middle; padding: 10px 0px;}
.subtotal li > p {padding-bottom: 6px;}
.subtotal li > p b {font-weight: 600;}
.subtotal li > span {color: #94a3ae; font-size: 0.8em; display: block;}
.subtotal li > span b {color: #222222;}
.subtotal + span {color: #94a3ae; font-size: 0.8em;}

/* 計價表單 */
.tableCon {padding: 16px 0;}
.tableCon h3 {padding: 10px 24px;}
.tableCon ul li {font-size: 0.8rem; padding: 10px 0; border-bottom: 1px solid #bebebe; vertical-align: middle;}
.tableCon ul li b {vertical-align: unset;}
.tableCon ul li:first-child {padding-left: 24px;}
.tableCon ul li:last-child {padding-right: 24px;}
.tableCon ul:nth-child(odd):not(.tbTotal) li {background: #f4f5f5;}
.tableCon ul.tbTitle li {border-top: 1px solid #bebebe; font-size: 0.85rem;}
.tableCon ul.tbTotal li {border-bottom:none; font-size: 1rem;}
.tableCon ul.tbTotal li b + i {color: #94a3ae;}

.tableCon.gf_buyCard ul li:first-child {min-width: 92px;}
.tableCon.gf_buyCard ul li:nth-child(2) {min-width: 55px;}
.tableCon.gf_buyCard ul li:nth-child(3) {min-width: 45px; max-width: 50px;}
.tableCon.gf_buyCard ul li:last-child {padding-left: 5px; max-width: 70px;}

.tableCon.gf_balance ul li:first-child {min-width: 65px; max-width: 77px; padding-right: 5px;}
.tableCon.gf_balance ul li:nth-child(2) {max-width: 80px;}
.tableCon.gf_balance ul li:nth-child(3) {min-width: 45px; padding-left: 5px;}
.tableCon.gf_balance ul li:nth-child(4) {min-width: 45px;}
.tableCon.gf_balance ul li:last-child {max-width: 52px;}


/* ============= Header ============= */
/* header + #main {padding-top:44px;} */
header#header {
	width:100%; height:44px; color:#fff; background:#65CA56; z-index:9;
	position:fixed; top:0px; left:0px;
}
.headerInner {}
.headerInner {}
.headerInner > li {vertical-align:middle;}
.headerInner h1 {font-size:1.1rem; font-weight:normal;}
.headerL {width:50px;}
.headerM {text-align:center;}
.headerR {width:50px;}


.headerInner a > i[class^="btn_"], .headerInner a > i[class*="btn_"] {
	width:44px; height:44px; margin:0px auto;
	background-size:24px;
}
.headerInner a > i.btn_hderBack {}
.headerInner a > i.btn_hderTicket {}

#contentHeader {width:100%; height:54px; background:#fff; padding:6px 0px; margin-bottom:1px;}
#contentHeader h2 {font-size:1.1rem;}
#contentHeader ul {}
#contentHeader ul > li {vertical-align:middle;}
#contentHeader ul > li:first-child a {display:none;}
#contentHeader ul > li:first-child a.active {display:block;}
#contentHeader ul a > i[class^="btn_"], #contentHeader ul a > i[class*="btn_"] {
	width:50px; height:44px; margin:0px auto;
	background-size:24px; display:block;
}
#contentHeader ul li.headerL a > i {background-position:16px 50%;}
#contentHeader ul li.headerR a > i {background-position:14px 50%;}
#contentHeader ul a > i.btn_func {}
#contentHeader ul a > i.btn_closeNav {}
#contentHeader ul a > i.btn_hderTicket.pointRed::after {top:7px; right:12px;}

/* Nav Side*/
section#navSide {
	width:100%; background:rgba(0,0,0,0.2); z-index:999; overflow:hidden;
	position:fixed; top:calc(0px + 54px); bottom:0; left:0; display:none;
	padding:0px; margin:0px auto;
}
#navSide .bg {width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:0;}
.navSideCont {
	width:fit-content; height:100%; margin:0px auto 0px 0px;
	background:#fff;
	box-shadow:0px 0px 6px #cecece;
}
.navSideCont ul {}
.navSideCont ul li {
	font-size:1.05rem; color:#4a4a4a;
	padding:15px 24px; border-bottom:1px solid; border-color:#dadcde;
}
.navSideCont ul li.active {
	background:#f0f4fa;
	border-color:#65CA56; border-width:2px;
}

.navSideCont li.navToglPad {padding: 0; border-bottom: none;}
.navSideCont li.navToglPad > ul {height: 0; opacity: 0;}
.navSideCont li.navToglPad > ul.action {height: auto; opacity: 1;}
.navSideCont li.navToglPad > ul li {font-size: 0.9rem; padding-left: calc(24px + 1em); padding-right: 15px;}
.navSideCont li.navToglBtn {position: relative;}
.navSideCont li.navToglBtn i {width: 0.8em; height: 1em; position: absolute; right: 24px; top: 50%; margin-top: -0.5em; background: url(../images/ico/arrow_expand@3x.png) no-repeat center center; background-size: contain;}
.navSideCont li.navToglBtn.action i { transform:scaleY(-1) ; -webkit-transform:scaleY(-1) ; -moz-transform:scaleY(-1) ; -ms-transform:scaleY(-1) ; -o-transform:scaleY(-1) ; }

/* ============= Nav Menu ============= */
nav#navMenu {
	width:100%; height:80px; background:#ffffff; color:#94a3ae; 
	position:fixed; bottom:0; left:0;
	box-shadow:0px 0px 3px #eecece;
}
#navMenu > ul {}
#navMenu > ul > li {width:20%; padding-bottom:20px; position:relative;}
#navMenu a p {font-size:0.8rem; text-align:center;}
#navMenu a > i[class^="btn_"], #navMenu a > i[class*="btn_"] {
	width:32px; height:32px; margin:0px auto;
	background-size:32px;
}
a.navFamipay {display:block; margin-top:-28px;}
#navMenu a > i.btn_navFpay {
	width:56px; height:56px; margin-bottom:2px;
	background-size:56px;
}

/* ============= RWD Setting ============= */
@media only screen and (max-width: 1280px) {
}
@media only screen and (max-width: 1024px) {
	/*Basic*/
	input[type=submit], input[type=button], input[type="reset"] {-webkit-appearance: none; -moz-appearance:none; appearance:none;}
	.scrollfalse {left:auto;}
}
@media only screen and (max-width: 768px) {
	/*Basic*/
	#inner .content {}	

	/* About */	
	
	/* Contact */
	
	/* Header */
	
	/* Footer */
}
@media only screen and (max-width: 460px) {
}
@media only screen and (max-width: 375px) {
}

@media only screen and (orientation: portrait) { /*高度大於等於寬度時*/
	/* #main {max-width:100%;} */
}

@media only screen and (orientation: landscape) {/*寬度大於高度時*/
	/* #main {max-width:100vh;} */
}