/* 20260713 */

@charset "utf-8";


/* 主機上傳字型檔 UberMove */
 /* 尚無使用 */
@font-face {
  font-family: 'UberMove';
  src:
    url('../fonts/UberMove-Light.woff2') format('woff2'),
    url('../fonts/UberMove-Light.woff') format('woff');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}
 /* 一般 */
@font-face {
  font-family: 'UberMove';
  src:
    url('../fonts/UberMove-Regular.woff2') format('woff2'),
    url('../fonts/UberMove-Regular.woff') format('woff');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}
 /* 標題+副標 Subheadline */
@font-face {
  font-family: 'UberMove';
  src:
    url('../fonts/UberMove-Medium.woff2') format('woff2'),
    url('../fonts/UberMove-Medium.woff') format('woff');
  font-weight: 700;  /* Medium */
  font-style: normal;
  font-display: swap;
}
 /* 按鈕 強調文字 */
@font-face {
  font-family: 'UberMove';
  src:
    url('../fonts/UberMove-Bold.woff2') format('woff2'),
    url('../fonts/UberMove-Bold.woff') format('woff');
  font-weight: 900;  /* Bold */
  font-style: normal;
  font-display: swap;
}


/* 主機上傳字型檔 UberMoveText */
 /* 法律附註+極小字 */
@font-face {
  font-family: 'UberMoveText';
  src:
    url('../fonts/UberMoveText-Light.woff2') format('woff2'),
    url('../fonts/UberMoveText-Light.woff') format('woff');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}
 /* 正文 Body */
@font-face {
  font-family: 'UberMoveText';
  src:
    url('../fonts/UberMoveText-Regular.woff2') format('woff2'),
    url('../fonts/UberMoveText-Regular.woff') format('woff');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}
 /* 尚無使用 */
@font-face {
  font-family: 'UberMoveText';
  src:
    url('../fonts/UberMoveText-Medium.woff2') format('woff2'),
    url('../fonts/UberMoveText-Medium.woff') format('woff');
  font-weight: 700;  /* Medium */
  font-style: normal;
  font-display: swap;
}
 /* 強調加粗 */
@font-face {
  font-family: 'UberMoveText';
  src:
    url('../fonts/UberMoveText-Bold.woff2') format('woff2'),
    url('../fonts/UberMoveText-Bold.woff') format('woff');
  font-weight: 900;  /* Bold */
  font-style: normal;
  font-display: swap;
}


/* 取消新版chrome搞出來的黑框bug */
*, *:focus {
	outline: none;
}
button:active, button.active, button:focus, button.focus {
	outline: none;
	border: none;
	box-shadow: none !important;
}


/* ─────────────────────────────────────────
    CSS 變數
───────────────────────────────────────── */
:root {
    --white  : #FFFFFF;
    --black  : #000000;

    --gray50   : #f3f3f3;
    --gray80   : #eeeeee; /*算式背景*/
    --gray100   : #e8e8e8; /*淺灰btn over*/
    --gray200   : #dddddd;
	--gray300   : #bbbbbb;
	--gray500   : #868686;
    --gray900  : #282828; /*黑色btn over*/

    --green400  : #06c167;
    --green500  : #009a51;
    --green600  : #0e8345;

    --yellow300  : #f6bc2f;
	
    --radius: 8px; /*btn*/
	--radius30: 30px; /*pill btn*/
    --radius50: 50%;
}

.radius {
	border-radius: var(--radius);
}
.white {
    color: var(--white);
}
.yellow300 {
    color: var(--yellow300);
}
.green400 {
    color: var(--green400);
}
.bg-gray {
    background-color: var(--gray100) !important;
}
.bg-black {
    background-color: var(--black) !important;
}
.bg-green {
    background-color: var(--green400) !important;
}


*, 
*::before, 
*::after { 
    box-sizing: border-box; 
}

/* 取消新版chrome的邊框bug */
*, *:focus {
	outline: none;
}
button:active, button.active, button:focus, button.focus {
	outline: none;
	border: none;
	box-shadow: none !important;
}

body {
    margin: 0;
	margin-top: 70px;
    font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:16px;
    /*font-size: clamp(13px,1.15vw,16px);  以 16px為基準 */
    color: var(--black);
    background: var(--white);
    min-width: 360px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: 'UberMove', sans-serif;
}
h6 {
    font-family: 'UberMoveText', sans-serif;
}

/*主視覺大標slogan*/
h1.slogan {
	font-size: 2.85vw;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -2px;
}
/*各區主標*/
h2 {
    font-size: 3em; /*48px*/
	font-weight: 700;
    line-height: 1.25;
	margin-bottom: 1rem;
}
h3 {
	font-size: 3em; /*48px*/
	font-weight: 700;
    line-height: 1.15;
	margin-bottom: 1.15rem;
}
/*各區副標*/
h4 {
	font-size: 2.25em; /*36px*/
	font-weight: 700;
    line-height: 1.15;
	margin-bottom: 1.15rem;
}
/*頁籤*/
h5 {
	font-size: 1.75em; /*28px*/
	font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}
/*內文*/
h6 {
	font-size: 20px;
	font-weight: 400; /* Regular */
    line-height: 1.6;
    margin-bottom: 1.3rem;
}
/*小字*/
p {
	font-size: 16px;
	font-weight: 300; /* Light */
	font-family: UberMoveText, system-ui, Arial, sans-serif;
    line-height: 1.5;
	margin-bottom: 1.4rem;
	text-align: justify; 
}
p.tc {
	/*
    color: var(--gray500);
    font-weight: 100;
    */
    color: var(--black);
}

.btn {
    font-size: 20px;
    font-weight: 900;
	line-height: 0.5;
	font-family: UberMove, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
    color: var(--black);
	text-decoration: none;
    /*text-decoration: underline;*/
}
a:hover {
    color: var(--black);
    text-decoration: none;
}
strong {
	font-weight: 900;
}
b {
	font-family: 'UberMoveText', sans-serif;
    font-weight:700;
}

hr:not([size]) {
    height: 2px;
}
hr {
	margin:25px 0;
	border:0; 
	background-color:var(--gray300);
	color:var(--gray300);
}

.rounded {
    border-radius:var(--radius) !important;
    overflow: hidden;
}

section.section-space {
    padding: 7em 0 0;
}
.mt-space {
	margin-top: 7em;
}
.mb-5 {
    margin-bottom: 2.35rem !important;
}

/*大螢幕桌上型*/
@media (min-width: 1600px) {
    .container {
        max-width: auto;
        width: 1350px;
    }
	/*主視覺大標slogan*/
	h1.slogan {
		font-size: 3.15vw;
	}
	h6 {
		font-size: 20px;
	}
}

/*大螢幕桌上型*/
@media (min-width: 1660px) and (max-width: 1799.98px){
	#hero.home h6 {
		font-size: 19.25px;
        letter-spacing: -1px;
	}
}


/*大螢幕桌上型*/
@media (min-width: 1925px) {
	/*主視覺大標slogan*/
	h1.slogan {
		font-size: 2.35vw;
	}
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
	.group2 h2 {
		font-size: 3.15vw;
	} 
    .item4 .card h5.card-title {
		font-size:1.75vw;
	}
}

/*桌上型 1450以下 xl*/
@media (min-width: 1200px) and (max-width: 1449.98px) {
    /*各區主標*/
    h2 {
        font-size: 3.25vw; 
    }
    h3 {
		font-size: 2.7em;
	}  
    h4 {
        font-size: 2em;
    }
}

/*桌上型 xl*/
@media (min-width: 1200px) {
    .container {
        max-width: 85%;
    }
}

@media (min-width: 1030px) and (max-width: 1199.98px) {
    /*主視覺大標slogan*/
    h1.slogan {
        font-size: 3.55vw !important;
    }
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	/*主視覺大標slogan*/
	h1.slogan {
		font-size: 4.5vw;
	}
	/*各區主標*/
	h2 {
		font-size: 2.35em;
		letter-spacing: -1px;
	}
	.group2 h2 {
		font-size: 3.5vw;
	}
	h3 {
		font-size: 2.35em;
	}
    /*各區副標*/
    h4 {
        font-size: 2em; 
    }
    /*頁籤*/
	h5 {
		font-size: 1.35em;
	}
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
	body {
		margin-top: 50px;
	}
	section.section-space {
        padding: 5em 0 0;
    }
    .mt-space {
        margin-top: 5em;
    }
    /*主視覺大標slogan*/
	h1.slogan {
		font-size: 4.35vw;
	}
	/*各區主標*/
	h2 {
		font-size: 1.85em;
		letter-spacing: -1px;
	}
    .group2 h2 {
		font-size: 1.65em;
	}
	h3 {
		font-size: 1.85em;
	}
	/*各區副標*/
	h4 {
		font-size: 1.6em;
	}
	/*頁籤*/
	h5 {
		font-size: 1.35em;
	}
	h6 {
		font-size: 18px;
	}
    .g-5, .gy-5 {
        --bs-gutter-y: 1.5rem;
    }
    .g-5, .gx-5 {
        --bs-gutter-x: 1.5rem;
    }
    hr {
        margin:20px 0;
    }
}


/*手機版*/
@media (max-width: 767.98px) {
	body {
		margin-top: 50px;
	}
    .container, .container-sm {
        max-width: 700px;
        width: 96%;
    }
    section.section-space {
        padding: 3.5em 0 0;
    }
    .mt-space {
        margin-top: 3.5em;
    }
    /*主視覺大標slogan*/
    h1.slogan {
	    font-size: 6.5vw;
        letter-spacing:0;
    }
    h2 {
        font-size: 24.5px;
        font-weight:800;
    }
    h3 {
        font-size: 24.5px;
    }
    /*各區副標*/
    h4 {
        font-size: 21.5px;
    }
    h5 {
        font-size: 18px;
    }
    h6, .btn {
        font-size: 16px; /*桌機20px*/
    }
    p {
        font-size: 14px; /*桌機16px*/
    }
    .g-3, .gy-3 {
        --bs-gutter-y: 0.5rem;
    }
    .g-3, .gx-3 {
        --bs-gutter-x: 0.5rem;
    }
    .g-4, .gy-4 {
        --bs-gutter-y: 0.75rem;
    }
    .g-4, .gx-4 {
        --bs-gutter-x: 0.75rem;
    }
    .g-5, .gy-5 {
        --bs-gutter-y: 1.5rem;
    }
    .g-5, .gx-5 {
        --bs-gutter-x: 1.5rem;
    }
    .mt-5 {
        margin-top: 1.25rem !important;
    }
    .mb-5 {
        margin-bottom: 1.25rem !important;
    }
}



/* ─────────────────────────────────────────
    區域 hero 主視覺
───────────────────────────────────────── */
#hero {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
}
#hero.home {
    background: var(--black);
	display: flex;
	align-items: center; /*容器內容上下對齊*/
	justify-content: center;  /*容器內容左右對齊*/
}
#hero.home .container img {
	width:33vw;
	max-width: 540px;
}
#hero.home .row {
    padding-top: 2em;
    padding-bottom: 2em;
}
#hero.home h5 {
    margin-bottom: 1.25em;
}
#hero.home h6 {
    font-weight: 300;
}


/* --- hero 右上角 NAV --- */
.hero-nav {
    display: flex;
    gap: 10px;
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    #hero {
        height:calc(100vh - 70px);
    }
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
    #hero {
        height:auto;
    }
}

/*手機版*/
@media (max-width: 767.98px) {
    .logo {
        width: auto;
		height:25px;
        display: inline-block;
    }
    #hero {
        height: auto;
    }
    #hero.home .row {
        padding-top: 1.25em;
        padding-bottom: 1.25em;
    }
    #hero.home .container img {
        width:100%;
        max-width:none;
        margin-bottom:0.75em;
    }
}

/* ─────────────────────────────────────────
    區域 header + nav
───────────────────────────────────────── */
header nav.navbar {
    border-bottom: 2px solid var(--black);
}
header nav .container {
	display: flex;
	justify-content:space-between;
    align-items: center;
}
header nav .container .navbar-collapse {
    flex-grow: 0;
}
a.logo {
    width: 100px;
	height: auto;
}

.mainNav .nav-item .nav-link {
    font-family: 'UberMove', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
	background-color: var(--white);
    white-space: nowrap;
    border-radius: var(--radius30);
    padding: 6px 20px;
	transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.mainNav .nav-item .nav-link.btn-nav {
    color: var(--white);
	background-color: var(--black);
    white-space: nowrap;
}
.mainNav .nav-item .nav-link.btn-nav:hover,
.mainNav .nav-item .nav-link.btn-nav:focus {
    background: var(--gray900);
    color: var(--white);
}
.mainNav .nav-item .nav-link.btn-nav img {
    width:auto;
	height:23.5px;
	vertical-align:text-bottom;
	margin-left: 0.35rem;
}


/*桌上型 xl*/
@media (min-width: 1200px) {
    header nav.navbar {
        padding-top: 15px;
        padding-bottom: 15px;
    }
	.mainNav .nav-item .nav-link:hover,
	.mainNav .nav-item .nav-link:focus {
		background: var(--gray50);
		color: var(--black);
	}
}

/*ipad 橫式 lg～桌機 xl*/
@media (min-width: 992px)  {
    header nav.navbar {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .mainNav .nav-item .nav-link.btn-nav {
		margin-left: 20px;
	}
}

/*手機版 ~ ipad 直式 md */
@media (max-width: 991.98px) {
    header nav.navbar {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    header nav.navbar #navMenu {
		margin-top:2em;
        margin-bottom:2em;
        color: rgba(0, 0, 0, 1);
    }
	.mainNav .nav-item .nav-link.btn-nav {
		display: inline-block !important;
        margin-top: 0.5rem;
    }
}



/* ─────────────────────────────────────────
    區域 footer
───────────────────────────────────────── */
footer {
    background: var(--black);
    color: var(--white);
    position: relative;
}
footer > .container {
    padding-top: 100px;
	padding-bottom: 100px; 
}
footer a.logo {
	display:inline-block;
    width:135px;
    height: auto;
	margin-bottom:1rem;
}
footer p {
	color: var(--gray300);
}
footer p.white {
	margin-bottom:50px;
}


footer a.text-link {
	font-family: 'UberMove', sans-serif;
    font-size: 16px;
    font-weight: 500;
	color: var(--white);
}
footer a.text-link:hover {
	color: var(--gray100);
}
footer a.text-link + a.text-link {
	margin-left: 40px;
}

/* SNS 社交圖示 */ 
.footer-sns {
    display: flex;
    gap: 1em;
    /*align-items: flex-start;
    flex-shrink: 0;*/
} 
.footer-sns a {
    font-size: 1.55em;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    background-color:var(--white);
    text-decoration: none;
    transition: 0.25s;
}
.footer-sns a:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}


/*手機版 ~ ipad 直式 md */
@media (max-width: 991.98px) {
    footer .text-md-end {
        padding-top: 1.25rem;
    }
}

/*手機版*/
@media (max-width: 767.98px) {
    .footer_logo img {
        width:10em;
    }
}



/* ─────────────────────────────────────────
    btn 按鈕
───────────────────────────────────────── */
.text-link {
    color: var(--black);
    text-decoration: none;
    transition: 0.2s;
}
.text-link:hover,
.text-link:focus { 
    color: var(--green500); 
}

.btn {
    padding: 1.65rem 2.15rem;
    transition: 0.25s;
}
.btn-check:focus+.btn, 
.btn:focus {
    outline: 0;
    /*box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);*/
    box-shadow: none;
}

/*手機版*/
@media (max-width: 767.98px) {
    .btn {
        padding: 1.5rem 1.75rem;
    }
}



/* 行動按鈕cta */
.btn-cta {
    background: var(--black);
    border-radius:var(--radius);
    color: var(--white);
}
.btn-cta:hover,
.btn-cta:focus {
    background: var(--gray900);
    color: var(--white);
}

.btn-cta-white {
    background: var(--white);
    border-radius:var(--radius);
    color: var(--black);
}
.btn-cta-white:hover,
.btn-cta-white:focus {
    background: var(--gray100);
    color: var(--black);
}

/* 無底色按鈕 */
.btn-text {
	color: var(--black);
	padding-right: 0;
}
.btn-text span:after {
	content:"";
	display: inline-block;
	width:100%;
	height: 1px;
	background: var(--black);
	transform-origin: left center;
}
.btn-text:hover,
.btn-text:focus {
    color: var(--black);
}

.btn-text-white {
	color: var(--white);
    padding-right: 0;
}
.btn-text-white span:after {
	content:"";
	display: inline-block;
	width:100%;
	height: 1px;
	background: var(--white);
	transform-origin: left center;
}
.btn-text-white:hover,
.btn-text-white:focus {
    color: var(--white);
}

/*桌上型 xl*/
@media (min-width:1200px) { 
	.btn-text:hover span:after,
	.btn-text-white:hover span:after {
		animation: line 0.5s;
	}
}

/* 白底黑框按鈕 */
.btn-outline {
    background: var(--white);
    border: 0.15em solid var(--gray100);
    border-radius: var(--radius);
    color: var(--black);
}
.btn-outline:hover,
.btn-outline:focus {
    background: var(--gray100);
    color: var(--black);
}


/* ─────────────────────────────────────────
    內建
───────────────────────────────────────── */
a.card img.arrow {
	transition: all 0.25s;
}
.card {
    border: 0.15em solid var(--gray100);
    border-radius: var(--radius);
}
.card-grayflip {
    background-color: var(--gray80);
}
.card .card-body {
    flex: 1 1 auto;
    padding: 1.5rem 1rem;
    padding-right: 0.75rem;
}
.card .card-body-step {
    flex: 1 1 auto;
    padding: 2rem 2.5rem;
    padding-right: 2.5rem;
}
.card .card-body.addpadding {
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem;
	padding-right: 1.25rem;
}
.card .card-body .card-title {
    margin-bottom: .5rem;
}


/*桌上型 xl*/
@media (min-width: 1200px) {
	a.card:hover img.arrow {
		transform: translate(8px, 0);
	}
}

/*手機版 ~ ipad 直式 md */
@media (max-width: 991.98px) {
	#help a.card img.arrow {
        margin-right: -0.75rem;
	}
}

/*手機版*/
@media (max-width: 767.98px) {
    #account .row h3 {
        font-size: 22px;
        font-weight: 700;
    }
    .card .card-body {
        padding: 1rem 0.75rem;
        padding-right: 0.5rem;
    }
    .card .card-body.addpadding {
        padding: 1.25rem 1rem;
        padding-right: 1rem;
    }
}

.mark, mark {
    padding: 1.35rem 1.75rem;
    background: var(--white);
    border: 0.15em solid var(--gray100);
    color: var(--black);
	display: inline-block;
	margin-bottom: 1.5rem;
}
.mark h5, mark h5 {
    margin-bottom: 0;
	line-height: 1;
}

/*手機版*/
@media (max-width: 767.98px) {
    .mark, mark {
        padding: 1rem 1.35rem;
        margin-bottom: 1.25rem;
    }
}




/*********** 頁籤 TAB ***********/
.nav-tabs {
    border:none;
	background: linear-gradient(to bottom, var(--gray100), var(--gray100)) no-repeat left bottom/100% 5px;
}
.nav-tabs .nav-link {
    margin-bottom: 0;
    background: 0 0;
	padding: 0 3rem 1.5rem;
    border:none;
	border-bottom: var(--gray100) solid 5px;
}
.nav-link,
.nav-link:focus, 
.nav-link:hover {
    color:var(--black);
}
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
    color:var(--black);
    background-color:var(--white);
	border:none;
    border-bottom: var(--black) solid 5px;
}
.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover {
    border:none;
    border-bottom: var(--black) solid 5px;
    isolation: isolate;
}
.nav-tabs .nav-link h5 {
    line-height: 1.2;
}

.tab-content {
	padding-top:2.5rem; 
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
	.nav-tabs .nav-link {
		padding: 0 1rem 0.75rem;
	}
}

/*手機版*/
@media (max-width: 767.98px) {
	.nav-tabs .nav-link {
		padding: 0 0.85rem 0.75rem;
	}
}



/* ─────────────────────────────────────────
    頁籤區 - 手機操作解說
───────────────────────────────────────── */
.tabCTbox {
    display:inline-block;
	margin: 1.5rem auto;
}
.mobile-ratio {
    aspect-ratio:0.460;
    position: relative;
    background-position: center center; /*左右 上下*/
	background-size:100%;
	background-repeat: no-repeat;
    background-color: var(--white);
    width: 300px; /*手機圖尺寸*/
}
.mobile-ratio + .mobile-ratio {
    margin-left:4.25em;
}
.mobile-ratio ul,
.mobile-ratio ul li {
    position:absolute;
}
.mobile-ratio ul {
    width: 100%;
    height: 100%;
}
.mobile-ratio.info ul {
    display: none;
}
.mobile-ratio ul li {
    cursor: pointer;
}

/*關閉-範圍是透明的整張圖區*/
.mobile-ratio .close-mobile {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: none;
}
.mobile-ratio.info .close-mobile {
    display: block;
}

/*互動式外擴散光*/
.btn-point {
	color:var(--white);
	font-size:22px;
    font-weight: 700;
	padding-top:2px;
	width: 38px;
	height: 38px;
	box-sizing: border-box;
	background-color: var(--green400);
    border-radius: var(--radius50);
    box-shadow: 0 0 0 0 rgba(127, 217, 154, 1.0);
	animation: btnGlow 2s infinite ease-out; /*動畫btnGlow,alternate-reverse會反轉播*/
}
.btn-point:hover {
    background-color: var(--green600) !important;
}

@keyframes btnGlow {
	 from {
	}
	 to {
	 	box-shadow:0 0 0 1.15em rgba(177, 234, 194, 0); /*動畫btnGlow*/
	}
}


/*tab1手機圖示*/
.tab1_mobileA {
    background-image: url(../images/tab1_mobileA.png);
}
.tab1_mobileA.i1 {
    background-image: url(../images/tab1_mobileA1.png);
}
.tab1_mobileA.i2 {
    background-image: url(../images/tab1_mobileA2.png);
}
.tab1_mobileA.i3 {
    background-image: url(../images/tab1_mobileA3.png);
}
.tab1_mobileB {
    background-image: url(../images/tab1_mobileB.png);
}
.tab1_mobileB.i4 {
    background-image: url(../images/tab1_mobileB4.png);
}
.tab1_mobileA ul li.no1 {
    bottom: 35.5%;
    left: 6.5%;
}
.tab1_mobileA ul li.no2 {
    bottom: 25.25%;
    right: 24.5%;
}
.tab1_mobileA ul li.no3 {
    bottom: 45%;
    left: 35%;
}
.tab1_mobileB ul li.no4 {
    top:24%;
    left:41%;
}


/*tab2手機圖示*/
.tab2_mobileA {
    background-image: url(../images/tab2_mobileA.png);
}
.tab2_mobileA.i1 {
    background-image: url(../images/tab2_mobileA1.png);
}
.tab2_mobileB {
    background-image: url(../images/tab2_mobileB.png);
}
.tab2_mobileB.i2 {
    background-image: url(../images/tab2_mobileB2.png);
}
.tab2_mobileA ul li.no1 {
    bottom: 21.5%;
    left: 25.5%;
}
.tab2_mobileB ul li.no2 {
    top: 48.5%;
    left: 24%;
}


/*tab3手機圖示*/
.tab3_mobileA {
    background-image: url(../images/tab3_mobileA.png);
}
.tab3_mobileA.i1 {
    background-image: url(../images/tab3_mobileA1.png);
}
.tab3_mobileB {
    background-image: url(../images/tab3_mobileB.png);
}
.tab3_mobileB.i2 {
    background-image: url(../images/tab3_mobileB2.png);
}
.tab3_mobileA ul li.no1 {
    bottom: 33.5%;
    left: 48%;
}
.tab3_mobileB ul li.no2 {
    bottom: 38%;
    right: 40%;
}

/*大螢幕桌上型*/
@media (min-width: 1600px) {
    .mobile-ratio {
        width: 360px; /*手機圖尺寸*/
    }
    .btn-point {
        font-size:25px;
        padding-top: 3px;
        width: 43px;
        height: 43px;
    }
}

/*手機版*/
@media (max-width: 767.98px) {
    .mobile-ratio {
        width:325px; /*手機圖尺寸*/
    }
    .mobile-ratio + .mobile-ratio {
        margin-left: 0;
        margin-top: 3rem;
    }
}



/* ─────────────────────────────────────────
    其它 自定
───────────────────────────────────────── */
/*限定超大尺寸*/
@media (min-width: 1549.98px) {
    .d-xxxl-block {
        display: block !important;
    }
}

/*字級加大*/
.fontBig {
    font-size: 125%;
}

img.icon.small {
	width: 45px;
	height: auto;
}
img.icon {
	width: 75px;
	height: auto;
}
img.icon.big {
	width: 110px;
	height: auto;
	margin-left: 1em;
	margin-right: 1em;
}
img.arrow {
	width: 20px;
	height: auto;
}

.ptb-add {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.no {
	font-family: 'UberMove', sans-serif;
	font-size:22px;
	font-weight: 900;
	color: var(--black);
	background-color:var(--yellow300);
	border-radius: var(--radius50);
	padding: 0.1rem 0.75rem;
}


/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	img.icon.big {
		width: 90px;
		margin-left: 0.75em;
		margin-right: 0.75em;
	}
}

/*手機版*/
@media (max-width: 767.98px) {
	img.icon.big {
		width: 50px;
		margin-left: 0;
		margin-right: 0.25em;
	}
    img.icon.small {
        width: 35px;
    }
    img.icon {
        width: 45px;
    }
    .ptb-add {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
}


/*公式*/
.formulaBox {
    padding:1.5em;
    margin: 1em auto 0;
    aspect-ratio:2.5;
    position: relative;
}
.formulaBox button {
    position: absolute;
    width: 3.65em;
    height: 3.65em;
    border:none;
    background:none;
    display: inline-block;
    transition: all 0.35s;
}

/*外送費用*/
.formulaBox button.info1Modal {
    top:5%;
    left:57.5%;
}
/*基本外送費*/
.formulaBox button.info2Modal {
    top:31%;
    left:42.5%;
}
/*額外獎勵*/
.formulaBox button.info3Modal {
    top:31%;
    right:4.25%;
}
#info3Modal .card  {
    padding-top: 1.25em;
    height: 100%;
}
#info3Modal .card img  {
    margin-bottom: 0.75em;
}


/*桌上型 xl*/
@media (min-width: 1200px) {
   .formulaBox button:hover {
    	transform: scale(1.075);
   }	
}



/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    /*基本外送費*/
    .formulaBox button.info2Modal {
        left:42.5%;
    }
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .formulaBox {
        padding:0.5em;
        margin-top: 0.5em;
    }
    .formulaBox button {
        padding:0.2rem;
        width: 2.25em;
        height: 2.25em;
    }
    /*外送費用*/
    .formulaBox button.info1Modal {
        top:3%;
        left:58%;
    }
    /*基本外送費*/
    .formulaBox button.info2Modal {
        top:32%;
        left:42%;
    }
    /*額外獎勵*/
    .formulaBox button.info3Modal {
        top:32%;
        right:4%;
    }
}

/*手機版*/
@media (max-width: 767.98px) {
    #pay .card {
        max-width:380px;
        margin: 0 auto;
        display:block;
    }
    .formulaBox {
        padding: 1em 0;
        margin: 0.5em;
        aspect-ratio:0.6419;
    }
    .formulaBox button {
        padding:0;
        width: 2.4em;
        height: 2.4em;
    }
    /*外送費用*/
    .formulaBox button.info1Modal {
        top:3%;
        left:auto;
        right:7%;
    }
    /*基本外送費*/
    .formulaBox button.info2Modal {
        top:17.5%;
        left:auto;
        right:7%;
    }
    /*額外獎勵*/
    .formulaBox button.info3Modal {
        top:60.75%;
        left:auto;
        right:7%;
    }
}



/*overflow超出範圍滑動捲軸*/
ul.sop {
	background: linear-gradient(to top, var(--gray100), var(--gray100)) no-repeat left 67px/100% 6px;
}
ul.sop li:before {
    content: '';
    display: block;
    flex-grow: 1;
	width:20px;
    height:20px;
	border-radius: var(--radius50);
    background-color: var(--black);
	transform: translate(0, 60px); 
}

.overflowBox {
    overflow: auto;
    margin: 1.5em 0;
}
.overflowBox ul.sop {
	display: flex;
	justify-content: space-between;
	margin:0 calc(50% - calc(var(--w) / 2) + 0.75rem);
	padding:0;
	list-style: none;
}
.overflowBox ul.sop li {
    /*width:18.5%; 100%除以5步驟,再保留1.5%間距*/
    /*width:23.5%; 100%除以4步驟,再保留1.5%間距*/
    width:31.5%; /*100%除以3步驟,再保留1.5%間距*/
}
.overflowBox ul.sop li img {
	margin-top: 25px;
	margin-bottom: 1.5em;
    
}
.overflowBox ul.sop li h6 strong {
    font-weight: 700;
}

/*倒數計時*/
.countdown {
	color:var(--green400);
	font-size: 10vw;
	line-height: 0.85;
	vertical-align: middle;
}

@media (min-width:1600px){
	.overflowBox ul.sop {
		--w:1350px;
		width:100%;
	}
}

@media (min-width:1200px) and (max-width:1599px){
	.overflowBox ul.sop {
		--w:85%;
		width:110%;
	}
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	.overflowBox ul.sop {
		--w:960px;
		width:120%;
	}
    .countdown {
        font-size: 15vw;
    }
}


/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
	.overflowBox ul.sop {
		--w:720px;
		width:120%;
	}
}

/*手機版*/
@media (max-width: 767.98px) {
	.overflowBox ul.sop {
		--w:96%;
        /*width:220%;*/
        width:285%;
	}
    .overflowBox ul.sop h6,
    .overflowBox ul.sop h6 strong {
		font-size: 14.5px;
        font-weight: 300;
        letter-spacing: -1px;
	}
	.countdown {
		font-size: 110px;
	}
}

/*按鈕裡的logo-Uber Eats*/
.btn img.bth-logo {
    width: auto;
    height: 23.5px;
    vertical-align: text-bottom;
    margin-left: 0.35rem;
}

/*右邊單條線*/
.midlineR {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.midlineR:after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 2px;
    background-color: var(--black);
    margin-left: .75rem;
}

#start .item4btn a .card .card-body {
	padding:40px 0;
}
#start .item4btn a:hover .card {
	background-color:var(--gray50) !important;
}
#start .item4btn a .card .card-body img.icon {
	margin-right: 20px; 
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    #start .item4btn a .card .card-body {
        padding-top:30px;
        padding-bottom:30px; 
    }
}

/*手機版*/
@media (max-width: 767.98px) {
    #start .item4btn {
        margin-bottom: 1em;
    }
    #start .item4btn a .card .card-body {
        padding: 25px 0;
    }
    #start .item4btn a .card .card-body img.icon {
        width: 33px;
        margin-right: 10px; 
    }
}




/*item4開合內容.collapse*/
.item4 a,
.item4 a .card {
	height: 100%;
}
.item4 .collapse {
	display: block;
}
.item4 .collapse {
  &:not(.show) { /*未展開時*/
    display: none;
  }
}
.item4 .collapsing {
  height: 0;
  overflow: hidden;
}
.item4 img.arrow {
  transition: all 0.25s;
}
.item4 .card .card-body .card-title {
	margin-bottom: 1rem;
}


/*展開後的箭頭*/
.item4 a[aria-expanded="true"] img.arrow {
  rotate:-180deg;
}

#insure .group1 .L {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#insure .group1 .L .card:last-child {
	margin-bottom: 0 !important;
	flex-grow: 1;
}
#insure .group1 .R .card {
	height:100%;
}

#insure .group2 .card {
	height:100%;
}

/*桌上型 xl*/
@media (min-width: 1200px) {
	.item4 a:hover img.arrow {
	  transform: translate(0, 8px);
	}
	/*頁籤區手機展示圖*/
	.tabpic {
		width:750px;
	}
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	#start .item4btn a .card .card-body h4 {
		font-size: 1.75em;
	}
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
	#start .item4btn a .card .card-body img.icon {
		margin-right: 8px; 
		width:28px;
	}
	#start .item4btn a .card .card-body {
		flex: 1 1 auto;
		padding: 2rem 0;
		padding-right: 0.25rem;
	}
	#start .item4btn a .card .card-body h4 {
		font-size: 1.4em;
	}
}

/*手機版*/
@media (max-width: 767.98px) {
    #start .item4 .col-md-6 + .col-md-6 {
		margin-top: 1.25em;
	}
    #start .item4 .card .card-body h5.card-title {
		font-size: 22px;
	}
}



/* ==================================================
   漢堡按鈕-旋轉X
================================================== */
.navbar-toggler {
	padding: 0;
	border-radius: 0;
	background-color: none;
	border: none;
}

/*Hamburger Menu to X css*/
.navbarX {
	width: 25px;
	height: 18px;
	background-color: transparent !important;
	position: relative;
	float: right;
	margin-right: 0;
	margin-top:6px; /*因應只有二條時,微調上下能居中*/
	cursor: pointer;
}

@media (min-width:992) {  /*手機版以外767px, md平板直式以外992px*/
	.navbarX {
		display:none;
	}
}

.navbarX i {
	background: var(--black);
	border-radius: 2px;
	width: 100%;
	height: 3px;
	content: "";
	display: block;
}

.navbarX i:nth-child(1) {
	animation: outT 0.8s backwards;  /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX i:nth-child(2) {
	margin: 5px 0;
	animation: outM 0.8s backwards;  /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX i:nth-child(3) {
	animation: outBtm 0.8s backwards; /*若要取消進場動畫*/
	animation-direction: reverse;
}

.navbarX.active i:nth-child(1) {
	animation: inT 0.8s forwards;
}

.navbarX.active i:nth-child(2) {
	animation: inM 0.8s forwards;
}
.navbarX.active i:nth-child(3) {
	animation: inBtm 0.8s forwards;
}

@keyframes inM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}

@keyframes outM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}


@keyframes inT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(7px) rotate(135deg);/*微上調2px*/
	}
}

@keyframes outT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(7px) rotate(135deg);
	}
}

@keyframes inBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}

@keyframes outBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}





/* ─────────────────────────────────────────
    effect 動畫 animation
───────────────────────────────────────── */
/*底部不會出現拉bar*/
html, body {
    overflow-x: hidden !important; 
}

/*區塊偵測出場*/
.inout {
	opacity:0;
	transition:all 1s;
	/*transition: all .5s cubic-bezier(0, .71, .4, 1);*/
	transform:translateY(10%);
}
.inout.highlight {
	opacity:1;
	transform:translateY(0);
}
.trans-delay1 {
    transition-delay:0.35s;
}
.trans-delay2 {
    transition-delay:0.7s;
}

@keyframes line{
	from{
		scale: 0 1;
	}
}


/*自動播放-進場動畫 淡入 fadeIn*/
.anime-fadeIn {
    animation:fadeIn 1.5s ease-in-out both;
}
@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

/*自動播放-進場動畫 淡入下往上 fadeInup*/
.anime-fadeInup {
    animation:fadeInup 1s ease-in-out both;
}
@keyframes fadeInup {
	0% {
		opacity:0;
		/*transform:translateY(13%); Y負數是往上偏移*/
		transform:translateY(20px); /*Y負數是往上偏移*/
	}
	100%{
		opacity:1;
	}
}

.anime-delay1 {
    animation-delay: 0.5s !important;
}
.anime-delay2 {
    animation-delay: 1s !important;
}


/* ─────────────────────────────────────────
    modal lightbox 背景濾鏡模糊
───────────────────────────────────────── */
body.modal-open,
.navbar {
	padding-right: 0 !important;
}
.modal-backdrop.show {
    opacity: 0.15;
	background-color:var(--black);
}
.modal {
	/*背景濾鏡模糊*/
    backdrop-filter: blur(1.5rem);
	-webkit-backdrop-filter: blur(1.5rem);
    padding: 0 1em; /*應付手機版右上x按鈕舒適空間*/
}

/*因為加了 backdrop-filter 背景濾鏡模糊,所以透明度的過度效果要特別移除*/
.modal.fade {
	/*transition: opacity .15s linear;*/
	transition: none;
}
.modal-content {
	border: none;
	border-radius: var(--radius);
}
.modal-body {
    padding: 1.5em 2em 2em 2em;
}
.modal .btn-textclose {
    padding: 0;
    margin-bottom: 1em;
}

/*手機版*/
@media (max-width: 767.98px) {
    .modal-dialog {
        width:100%;
        margin: 1.75rem auto;
    }
    .modal-body {
        padding: 1.25em 1.25em 1.25em 1.25em;
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        width:90%;
        max-width:1300px;
        margin: 1.75rem auto;
    }
}