@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:var(--color-graydeep);}
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:var(--color-graydeep); font-size:1rem; line-height:40px;
	background:url(../../img/FamilyApp/ico/arrow_expand@2x.png) no-repeat right center; background-size:15px;
	background-position:98% 50%;
}
select.selected {color:var(--color-greenlight);}
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;}

/* ============= Model ============= */
.scrollfalse {
	/* overflow:hidden;
	touch-action: none; */
	height:100%; 
	position:fixed;
}
#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:var(--color-bluedeep); 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: var(--color-gray);}

/*  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:var(--header-height); bottom:0; left:0;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.btn_openPop {
}
.btn_closePop {
	width:var(--popHeader-height); height:var(--popHeader-height); cursor:pointer;
	display:block; float:right;
	background:url(../../img/FamilyApp/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:var(--color-line);
}
.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:var(--color-gray);
}
.popCont > section.popSelectList a {color:var(--color-blue);}
.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{background: rgba(255,255,255,0.85);}
#popQRcode .popCont section, #popQRcode article  {background: none;}
.qrcodeBox {display: flex; align-items: center; height: 70%;}
.qrcodeBox article {text-align: center;}
.qrcode_view {background-image: url(../../img/FamilyApp/ico/barcode@3x.png); background-repeat: repeat-x; margin: 0 auto; width: 90%;}
.reloadBox a {width: 60px; height: 60px; display: block; -webkit-border-radius: 60%; border-radius: 60%; margin: auto; background: #fff;}
.reloadBox i.btn_reload {width: 30px; height: 30px; margin: auto; top: 15px; background-size: contain;}

.alertModel {
	width:100%; height:100vh; position:fixed; top:0; left:0;
	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;}


.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(../../img/FamilyApp/navicon/FamiPay.png);}
i.btn_navHome {background-image:url(../../img/FamilyApp/navicon/Home_none.png);}
i.btn_navHome.active {background-image:url(../../img/FamilyApp/navicon/Home_active.png);}
i.btn_navBarc {background-image:url(../../img/FamilyApp/navicon/Barcode_none.png);}
i.btn_navBarc.active {background-image:url(../../img/FamilyApp/navicon/Barcode_active.png);}
i.btn_navFunc {background-image:url(../../img/FamilyApp/navicon/Function_none.png);}
i.btn_navFunc.active {background-image:url(../../img/FamilyApp/navicon/Function_active.png);}
i.btn_navMemb {background-image:url(../../img/FamilyApp/navicon/Member_none.png);}
i.btn_navMemb.active {background-image:url(../../img/FamilyApp/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(../../img/FamilyApp/ico/arrow4@2x.png);}
i.btn_hderTicket {background-image:url(../../img/FamilyApp/ico/notification2_copy@2x.png);}

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

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

i.btn_reload {background-image:url(../../img/FamilyApp/ico/reload@3x.png);}

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

i.ico_shipbox {background-image: url(../../img/FamilyApp/ico/delivery_1.png);}
i.ico_shipboxgray {background-image: url(../../img/FamilyApp/ico/delivery_1_gery.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:var(--color-gray); font-weight:normal; margin-bottom:24px;}
.atcl_private div {text-align:left;}
.atcl_private div h3 {font-size:1.1rem; color:var(--color-graydeep); margin-bottom:5px;}
.atcl_private div p {font-size:1rem; font-weight:normal; line-height:160%; color:var(--color-gray); 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;}


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: var(--color-gray); font-size: 0.8em; text-align: justify; display: block; line-height: 140%;}
section hr {background-color:var(--color-line); margin-bottom:8px;}

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

section h3 {color:#000;}
section h3 + span {color:var(--color-gray); font-size:0.9rem;}
a.noteBtn_blue {color:rgb(9,148,221); font-size:0.8rem; display:block; float:right;}
a.noteBtn_green {color:var(--color-greenlight); font-size:0.8rem; display:block; float:right;}
a.noteBtn_blue i.ico_time,
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 {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"] {
	width:28px; height:28px; background:#fff;
	border-radius:15px; border:1px solid #dadcde; 
	margin-right:10px; margin-bottom:0px;
}
    section label input[type="checkbox"]:checked,
    section label input[type="checkbox"].active {
        background: url(../../img/FamilyApp/ico/check@2x.png) no-repeat 50% 50%;
        background-size: 26px;
    }
section label input[type="checkbox"] + span {color:rgba(74,73,74); line-height:300%; vertical-align:inherit;}
section label + span {width:100%; display:block; font-size:0.8rem; color:var(--color-gray); margin-bottom:5px;}

section label > select {width:100%; border-bottom:1px solid; border-color:var(--color-line);}
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:var(--color-gray); border:1px solid var(--color-gray);}
.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:var(--color-blue);}

/* 頁籤 */
#contentSelector {border-bottom:1px solid; border-color:var(--color-line); background-color:#fff; margin-bottom:8px;}
#contentSelector ol {}
#contentSelector ol li {text-align:center; line-height:35px;}
#contentSelector ol li a {
	color:var(--color-graydeep); 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:var(--color-greenlight);}
#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:var(--color-gray);}
#storeSelector p.selected {color:var(--color-greenlight);}
#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% - 36px); background:none; display:inline-block;}
ul.searchPad li.searchBTN input {width:100%; background:none; color:var(--color-graydeep);}
ul.searchPad li.searchInput p {
	background:var(--color-graylight); 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;}

article.shippingCar {}
.shippingCar h3 {font-size:2rem; margin-bottom:10px;}
.shippingCar p { margin-bottom:10px;}
.shippingCar_view {background-image:url(../../img/FamilyApp/img/delivery-truck@3x.png);}

/* Shipping More */
.cssTable.shippingMore_listPG {}
.shippingMore_listPG ul {}
.shippingMore_listPG li {
	font-size:1.1rem; vertical-align:middle; padding:10px 0px;
	border-bottom:1px solid var(--color-graylight);
}
.shippingMore_listPG i.ico_shipbox {
	width:34px; height:34px; background-color:#e1f2f7; background-size:70% 70%;
	-webkit-border-radius:50%; border-radius:50%;
}
.shippingMore_listPG li > span {color:var(--color-gray); font-size:0.8em; display:block; padding-bottom:6px;}
.shippingMore_listPG li > span + p {}
.shippingMore_listPG label > span {font-size:1rem; padding-right:10px;}

.shippingMore_listPG li.listIco {width:50px;}
.shippingMore_listPG li.listCtrl {text-align:right; padding-right:10px;}
.shippingMore_listPG li.listCtrl label {padding:8px 0px;}

.shippingMore_inputPG {}
.shippingMore_inputPG p.data {
	width:100%; line-height:2rem; border:1px solid var(--color-graylight);
	background-color:var(--color-graylight); padding:0px 5px;
	-webkit-border-radius:8px; border-radius:8px;
}
.shippingMore_inputPG p.data input {width:calc(100% - 4em); padding:0; line-height:2rem; background:transparent;}

.shippingMore_inputPG.fail p.data {border:1px solid var(--color-red);}

.shippingMore_inputPG .ico_failRed,
.shippingMore_inputPG .ico_checkGreen {
	width:1.4em; height:1.4em; display:none; float:right; margin-top:0.4em;
	-webkit-border-radius:1em; border-radius:1em; background-size:contain;
}
.shippingMore_inputPG .ico_failRed b {
	width:8em; right:110%; bottom:-4px; text-align:center; display:none; z-index:9;
	position:absolute; font-size:0.7rem; background:rgba(125,0,0,0.7); color:#fff; padding:0px 5px;
}
.shippingMore_inputPG .ico_failRed:hover b,
.shippingMore_inputPG .ico_failRed:active b,
.shippingMore_inputPG .ico_failRed:focus b {display:block;}

.shippingMore_inputPG.fail .ico_failRed,
.shippingMore_inputPG .listdata.fail .ico_failRed,
.shippingMore_inputPG.success .ico_checkGreen,
.shippingMore_inputPG .listdata.success .ico_checkGreen  {display:block;}

.shippingMore_inputPG i.ico_mobile {
	width:1.4em; height:1.4em; display:inline-block; vertical-align:inherit; margin-right:5px; background-size:contain;
}
.shippingMore_inputPG .listdata {margin-bottom:20px;}
.shippingMore_inputPG .listdata * {vertical-align:inherit;}
.shippingMore_inputPG .listdata .title {margin-bottom:10px; font-size:0.9rem;}
.shippingMore_inputPG .title b {font-weight:600; padding-left:5px;}
.shippingMore_inputPG .title span {color:var(--color-gray); font-size:0.9em; float:right; padding-top:5px; display:none;}
.shippingMore_inputPG .listdata p.data {padding-left:1em;}
.shippingMore_inputPG i.ico_shipboxgray {
	width:26px; height:26px; display:inline-block;
	background-color:var(--color-graylight); background-size:70% 70%;
	-webkit-border-radius:1em; border-radius:1em;
}
.shippingMore_inputPG i.btn_cancleX {
	width:28px; height:28px; float:right; margin-top:3px; display:none;
}
.shippingMore_inputPG i.btn_cancleX.active {
	display:block;
}

.shippingMore_inputPG .listdata.fail .title span {color:var(--color-red);}

.shippingMore_inputPG .listdata > span {font-size:0.8rem;}
.shippingMore_inputPG .listdata .st1 {color:var(--color-gray);}
.shippingMore_inputPG .listdata .st2 {color:var(--color-greenlight); display:none;}
.shippingMore_inputPG .listdata .st3 {color:var(--color-red); display:none;}

.shippingMore_inputPG .listdata.success {}
.shippingMore_inputPG .listdata.success .st1,
.shippingMore_inputPG .listdata.fail .st1 {display:none;}
.shippingMore_inputPG .listdata.fail .title span,
.shippingMore_inputPG .listdata.success .title span,
.shippingMore_inputPG .listdata.success .st2 {display:block;}
.shippingMore_inputPG .listdata.fail {}
.shippingMore_inputPG .listdata.fail .st3 {display:block;}
.shippingMore_inputPG .listdata.fail .data {border:1px solid var(--color-red);}

/* My Package */
.packageSelector.noBottom {border-bottom: 1px solid; border-color: var(--color-line);}
.packageSelector ol li a {color: var(--color-graydeep);}
.packageSelector ol li a.active {color: var(--color-greenlight);}
.packageSearch ul.searchPad li.searchInput .btn_cancleX {display: none;}
.packageSearch ul.searchPad li.searchInput .btn_cancleX.active {display: block;}

.package_listPG i.ico_shipboxgray, .package_listPG i.ico_correctGray {width: 26px; height: 26px; display:inline-block; vertical-align: super; background-size:70% 70%; -webkit-border-radius:1em; border-radius:1em;}
.package_listPG i.ico_shipboxgray {background-color: var(--color-graylight); margin-top: -36px; display: block;}
.package_listPG i.ico_correctGray {background-color: none;}

.package_listPG li {font-size: 1.1rem; padding: 10px 0px; vertical-align: middle; border-bottom: 1px solid var(--color-graylight);}
.package_listPG li.listData {vertical-align: top;}
.package_listPG li.listIco {width: 35px; padding-top: 0;}
.package_listPG li > span {color: var(--color-gray); font-size: 0.8em; display: block; padding-bottom: 10px;}
section li span.stG {color: var(--color-greenlight);}
section li span.stB {color: var(--color-graydeep);}
.package_listPG ul.packageStatus li {border-bottom: none;}
.package_listPG ul.packageStatus li span:last-child {padding-bottom: 0;}

.packageBox {padding-bottom: 60px; margin-bottom: 8px;}
.packageBox_view {background-image: url(../../img/FamilyApp/img/box_delivery@3x.png);}
.packageBox a.noteBtn_blue {font-size: 0.95rem; float: none; display: inline-block;}

.package_listPG .storeList li {border-bottom: none; padding: 0 0 10px 0;}
.package_listPG .storeList span {display: inline-block;}
.package_listPG .storeList span:last-child {float: right;}
.package_listPG .storeInfo li {padding: 0 0 10px 0; border-bottom: none; text-align: right;}
.package_listPG .storeInfo li hr {background-color: var(--color-graylight); margin-bottom: 0;}

.statusPG::after {content: ''; width: 20px; height: 20px; margin-left: 8px; display: block; border-left: 2px solid var(--color-graylight);}
.statusPG:last-child::after {display: none;}
.statusPG li {border-bottom: none; padding: 0;}
.statusPG li * {color: var(--color-gray); font-size: 0.8em;display: inline-block; vertical-align: middle; padding: 0;}
.statusPG .statusList {display: flex; align-items: center; justify-content: space-between; border-bottom: none; padding-bottom: 0;}
.statusPG .statusList i.ico_correctGray {width: 18px; height: 18px; margin-right: 0.3rem; text-align: center; background-image: none;}
.statusPG .statusList i.ico_correctGray::before {content: ''; display: inline-block; width: 8px; height: 8px; background-color: var(--color-gray); -webkit-border-radius: 60%; border-radius: 60%; vertical-align: text-bottom;}
.statusPG .statusList .time span {display: none;}

.statusPG .statusList.active .step span {color: var(--color-graydeep);}
.statusPG .statusList.active i.ico_correctGray {width: 18px; height: 18px; margin-right: 0.3rem; background-image: url(../../img/FamilyApp/ico/correct_gray.png);}
.statusPG .statusList.active i.ico_correctGray::before {display: none;}
.statusPG .statusList.active .time span {display: inline-block;}

.btnArea.subBtn input[type="button"] {width: 55%; margin: auto;}

/* Clean */
.clean_listPG {}
.clean_listPG li {font-size: 1.1rem; vertical-align: middle; padding: 10px 0px; border-bottom: 1px solid var(--color-graylight);}
.clean_listPG li > p {padding-bottom: 6px;}
.clean_listPG li > span {color: var(--color-gray); font-size: 0.8em; display: block;}
.clean_listPG li > span b {color: var(--color-graydeep); padding-bottom: 10px; display: block;}
.clean_listPG li.listCtrl > * {display: inline-block; vertical-align: middle; text-align: center;}
.clean_listPG li.listCtrl i {width: 30px; height: 30px; -webkit-border-radius: 60%; border-radius: 60%; border: 1px solid var(--color-blue); background: none; line-height: 30px; color: var(--color-blue);}
.clean_listPG li input {width: auto; padding: 5px; margin: 0 13px; line-height: 25px; color: var(--color-gray); font-size: 0.8em; background: var(--color-graylight); -webkit-border-radius: 5px; border-radius: 5px;}
.clean_listPG li.listCtrl input {width: 45px;}
.clean_listPG li span + input {margin: 0; width: 150%;}
.clean_listPG li.listData.cssFlex {align-items: center; border-bottom: none;}
.clean_listPG li.listData.cssFlex b {display: inline-block; vertical-align: middle; padding: 0;}
.clean_listPG li .spanTitle {text-align:right;}
.clean_listPG li .inputValue {border:none;border-color:transparent;background:none;text-align:right;font-size:1em;padding-right:0px; width:50px;}
.clean_listPG li .inputCoupon {border:none;border-color:transparent;background:none;text-align:right;font-size:1em;padding-right:0px; width:100px;}

.cleanStyle li > * {width: auto; margin: 0; display: inline-block; vertical-align: middle;}
.cleanStyle li label + span {margin-left: 5px; display: none;}
.cleanStyle input[type='radio'] {width: 28px; height: 28px; background: #fff; -webkit-border-radius: 15px; border-radius: 15px; border: 1px solid var(--color-line); margin: 5px 10px 5px 0;}
.cleanStyle input[type='radio']:checked {background: var(--color-greenlight); border-color: var(--color-greenlight); box-shadow: inset 0 0 0px 2px #fff;}

.cleanStyle li.active label + span {display: inline-block;}
.cleanStyle li + .cleanStyleBox {display: none;}

.cleanCheckList hr {margin: 5px 0;}
.cleanCheckList span.ta-R {padding-right: 5px;}

.clean_listPG .checkNote li.note {border-bottom: none; padding-top: 20px; padding-bottom: 0;}

.popEditPG {height: calc(100% - 40px); overflow-x: hidden; overflow-y: scroll;}
.popEditPG .clean_listPG li > span b {padding-bottom: 5px; line-height: 100%;}
.popEditPG .clean_listPG li.listData.cssFlex {border-bottom: 1px solid var(--color-graylight);}
.popEditPG .clean_listPG .cleanTotal li.listData.cssFlex {border-bottom: none; padding: 0;}
.cleanStyleBox > div {display: table;}
.cleanStyleBox > div dt, .cleanStyleBox > div dd {font-size: 0.8rem;}
.cleanStyleBox > div dt {padding: 20px 0 5px 12px; color: var(--color-graydeep);}
.cleanStyleBox > div dd {width: calc(100% / 6);}
.cleanStyleBox > div dd i {width: 45px; height: 45px; margin: 5px 0; display: block;  color: var(--color-gray); -webkit-border-radius: 60%; border-radius: 60%; text-align: center; line-height: 45px;}
.cleanStyleBox > div dd i.active {background: #e6f7e4; color: var(--color-graydeep);}
.cleanOp.st + .cleanStyleBox > div dt {padding-left: 0; font-size: 0.7rem;}

/* ============= Header ============= */
/* header + #main {padding-top:var(--header-height);} */
header#header {
	width:100%; height:var(--header-height); color:#fff; background:var(--color-greenlight); 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:var(--header-height); height:var(--header-height); margin:0px auto;
	background-size:24px;
}
.headerInner a > i.btn_hderBack {}
.headerInner a > i.btn_hderTicket {}

#contentHeader {width:100%; height:var(--contentHeader-height); 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:var(--header-height); 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:var(--navside-height); 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:var(--color-line);
}
.navSideCont ul li.active {
	background:#f0f4fa;
	border-color:var(--color-greenlight); border-width:2px;
}


/* ============= 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:var(--nav-iconH); height:var(--nav-iconH); margin:0px auto;
	background-size:var(--nav-iconH);
}
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;}
}
@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;} */
}