@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;800;900&display=swap');/*繁中-黑體*/

/* 20260506 */

/* ─────────────────────────────────────────
    CSS 變數
───────────────────────────────────────── */
:root {
    --orange : #FF6100;
    --black  : #202020;
    --gray   : #E0E0E0;
    --gray-w : #dbdbdb;
    --white  : #FFFFFF;
    --dark-bg: #202020;
    --quiz-bg: #f2f2f2;

    --radius: 2.5rem; /*為了保持按鈕圓弧*/
    --radius50: 50%;
}

.white {
    color: var(--white);
}
.orange {
    color: var(--orange);
}
.bg-gray {
    background-color: var(--gray);
}
.bg-black {
    background-color: var(--black) !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;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: clamp(15px,1.15vw,16px);
    color: var(--black);
    background: var(--white);
    min-width: 360px;
    overflow-x: hidden;
}
section.section-space {
    padding: 10vh 0;
}

h1 {
	font-size: 4.5em;
    font-weight: 900;
    line-height: 1;
}
/*全站內容區大標 & 互動測驗題目*/
.h2, h2 {
	font-size: 3.15em;
	font-weight: 900;
    line-height: 1.15;
	margin-bottom: 1rem;
}
/*全站內容區副標*/
.h3, h3 {
	font-size: 2.35em;
	font-weight: 800;
	margin-bottom: 1.15rem;
}
.h4, h4 {
	font-size: 2.1em;
	font-weight: 800;
}
/*互動測驗結果內容*/
.h5, h5 {
	font-size: 1.95em;
	font-weight: 500;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}
/*footer標題*/
.h6, h6 {
	font-size: 1.55em;
	font-weight: 500;
    line-height: 1.35;
    margin-bottom: 1.3rem;
}
/* hero 輸入品牌名稱 + 頁尾諮詢表單 */
.inputBox input,
.inputBox .btn-go {
    font-size: 1.55em;
    font-weight: 600;
}
p {
	font-size: 1.55em;
	font-weight: 400;
    line-height: 1.5;
	margin-bottom: 1.4rem;
	text-align: justify; 
}
.btn {
    font-size: 1.9em;
    font-weight: 600;;
}
a {
    color: var(--black);
    text-decoration: underline;
}
a:hover {
    color: var(--orange);
    text-decoration: none;
}
a.text-link {
    font-size: 1.6em;
    font-weight: 600;
}

#ftModal .ptb-add {
    padding: 4rem 1.5rem;
}
#plan1Modal .ptb-add {
    padding: 4rem;
    padding-right: 1.5rem;
}

/*圖文左右排版 .imgctRL*/
.imgctRL .mt-add {
    margin-top: 3rem;
}

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


/*大螢幕桌上型*/
@media (min-width: 1600px) {
    .container {
        max-width: 85%;
    }
    h1 {
        font-size: 7em;
    }
    /*全站內容區大標 & 互動測驗題目*/
    .h2, h2 {
        font-size: 3.95em;
    }
    .h3, h3 {
        font-size: 2.65em;
    }
    /*圖文左右排版 .imgctRL*/
    .imgctRL .mt-add {
        margin-top: 4rem;
    }
    .d-xxxl-block {
        display: block !important;
    }
}

/*ipad 直式 md ~ ipad 橫式 lg*/
@media (min-width: 768px) and (max-width: 1199.98px) {
    h1 {
        font-size: 3.5em;
    }
    /*為了互動測驗題目斷句問題*/
    .h2, h2 {
        font-size: 2.925em;
    }
    .h3, h3 {
        font-size: 2.15em;
    }
    .g-5, .gy-5 {
        --bs-gutter-y: 2rem;
    }
    .g-5, .gx-5 {
        --bs-gutter-x: 2rem;
    }
    .imgctRL .mt-add {
        margin-top: 2rem;
    }
}


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


/*手機版 橫式 sm*/
@media (min-width: 576px) and (max-width: 767.98px) {
    p {
        font-size: 1.4em;
    }
}


/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
    h1 {
        font-size: 4.5em;
    }
    .h2, h2 {
        font-size: 2.8em;
    }
    .h3, h3 {
        font-size: 2em;
    }
    .h4, h4 {
        font-size: 1.9em;
        font-weight: 800;
    }
    /*互動測驗結果內容*/
    .h5, h5 {
        font-size: 1.7em;
    }
    #plan1Modal .ptb-add {
        padding: 3rem;
    }
    /*圖文左右排版 .imgctRL*/
    .imgctRL .mt-add {
        margin-top: 1rem;
    }
}


/*手機版*/
@media (max-width: 767.98px) {
    .container, .container-sm {
        max-width: 700px;
        width: 96%;
    }
    section.section-space {
        padding: 6vh 0;
    }
    h1 {
        font-size: 9vw;
    }
    .h2, h2 {
        font-size: 1.7em;
        line-height: 1.25;
    }
    .h3, h3 {
        font-size: 1.425em;
        margin-bottom: 0.5rem;
    }
    .h4, h4 {
        font-size: 1.4em;
    }
    /*互動測驗結果內容*/
    .h5, h5 {
        font-size: 1.3em;
        line-height: 1.5;
    }
    /*footer標題*/
    .h6, h6 {
        font-size: 1.2em;
    }
    /* hero 輸入品牌名稱 + 頁尾諮詢表單 */
    .inputBox input,
    .inputBox .btn-go {
        font-size: 1.25em;
    }
    .inputBox .btn-go {
        padding: 0 1.5em;
    }
    p {
        font-size: 1.2em;
        font-weight: 500;
    }
    .btn {
        font-size: 1.35em;
    }
    a.text-link {
        font-size: 1.25em;
    }
    .g-5, .gy-5 {
        --bs-gutter-y: 1.5rem;
    }
    .g-5, .gx-5 {
        --bs-gutter-x: 1.5rem;
    }
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    #ftModal .ptb-add {
        padding: 3rem 1.5rem;
    }
    #plan1Modal .ptb-add {
        padding: 2rem 1.5rem;
    }
    /*圖文左右排版 .imgctRL*/
    .imgctRL .mt-add {
        margin-top: 0;
    }
    /*只針對手機版的圖,表單和按鈕仍需保持不變*/
    img.rounded {
        border-radius:1.25rem !important;
    }
}



/* ─────────────────────────────────────────
    區域 hero 主視覺
───────────────────────────────────────── */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 560px;
    padding: 1.65rem;
}
#hero.home {
    background: url('../images/hero-home.jpg') no-repeat 72% center / cover; /*contain*/
}
#hero.page1 {
    background: url('../images/hero-page1.jpg') no-repeat 72% center / cover; /*contain*/
}
#hero.page2 {
    background: url('../images/hero-page2.jpg') no-repeat 72% center / cover; /*contain*/
}

.header {
    display: flex;
	justify-content:space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    z-index: 99;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    transform: translateX(-50%);
    padding: 1rem 1.65rem;
}
.header.highlight {
    background: #F60;
}
.logo {
    width: 12.5em;
}

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

/* --- 首頁左下導引箭頭 --- */
.guide-arrow {
    position: absolute;
    left: 1.65rem;
    width: 9.5em;
    display: inline-block;
}
/* --- 內頁導引箭頭 --- */
.scroll-arrow {
    position: absolute;
    left: 50%;
    translate:-50% 0; /* X軸,Y軸 */
    /*width: 1.25em;*/
    width: 5em;
    display: inline-block;
    z-index: 99;
}
.guide-arrow,
.scroll-arrow {
    bottom: 1em;
}

/* hero slogan */
.hero-ct {
    margin-top: 16vh;
} 
.hero-ct h1.slogan {
    display: inline-block;
    background: var(--white);
    padding: 0.4rem 1.25rem 1rem;
    margin-bottom:5px;
} 
.hero-ct p.subtitle {
    font-size: 1.565em;
    letter-spacing: 0.025rem;
    line-height: 1.5;
    font-weight: 600;
    display: inline-block;
    background: var(--white);
    padding: 0.4rem 1.25rem;
    margin-bottom: 0;
}

/* hero 輸入品牌名稱 + 頁尾諮詢表單 */
.inputBox {
    position: relative;
    border-radius:var(--radius);
    overflow: hidden;
    width:100%;
    max-width: 30em;
    margin:20px 0;
}
.inputBox input {
    width: calc(100% - 2em);
    border: none;
    outline: none;
    padding-left: 1.25em;
    color: var(--black);
    background: var(--white);
    font-family: 'Noto Sans TC', sans-serif;
}
.inputBox input::placeholder { 
    color:var(--gray-w);
    font-weight: 400;
}
.inputBox input,
.inputBox .btn-go {
    height: 65px; /*高度數據需一致*/
}
.inputBox .btn-go {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--white); 
    padding: 0 1.75em;
    border:none;
    border-radius:var(--radius);
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
    transition: 0.25s;
}
.btn-go:hover { 
    /*background: var(--black); 因為ft背景是黑色*/
    filter: brightness(130%);
}


/*大螢幕桌上型*/
@media (min-width: 1600px) {
    .header {
        padding: 1.5rem 1.65rem;
    }
    .hero-ct p.subtitle {
        font-size: 2.2em;
        line-height: 1.35;
        padding: 0.6rem 1.25rem;
    }
}


/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-ct p.subtitle {
        font-size: 1.25em;
        letter-spacing: 0.;
        line-height: 1.35;
        padding: 0.4rem 1.25rem;
    }
    .guide-arrow,
    .scroll-arrow {
        bottom: 3.5em;
    }
}

/*ipad 直式 md ~ ipad 橫式 lg*/
@media (min-width: 768px) and (max-width: 1199.98px) {
    .logo {
        width: 10em;
    }
    #hero {
        height:calc(100vh - 70px);
    }
    /* hero slogan */
    .hero-ct {
        margin-top: 14vh;
    } 
    .hero-ct h1.slogan {
        padding: 0.25rem 1.25rem 0.65rem;
    }
}

/*手機版*/
@media (max-width: 767.98px) {
    .header {
        display: block;
        padding:.75rem;
    }
    /*手機往下滑時logo消失*/
    .header.highlight .logo {
        display: none;
    }
    #hero {
        height:calc(100vh - 60px);
        padding: 0.75rem;
    }
    .hero-ct {
        margin-top:120px;
    }
    .hero-ct h1.slogan {
        padding: 0.4rem 0.75rem 0.5rem;
    }
    .hero-ct p.subtitle {
        font-size: 1.25em;
        line-height: 1.45;
        letter-spacing: -0.01em;
        padding: 0.25rem 0.75rem 0.5rem;
    }
    .hero-nav {
        gap: 4px;
    }
    .hero-nav .btn-nav {
        text-align: center;
        font-size: 15px;
        width:50%;
        padding-left: 0;
        padding-right: 0;
    }
    .home .hero-nav .btn-nav span {
        display: none;
    }
    .home .hero-nav .btn-nav {
        width:36%;
    }
    .home .hero-nav .btn-nav.dark {
        width:28%;
    }
    .logo {
        width: 100px;
        display: inline-block;
        margin-bottom: 0.75rem;
    }
    /* hero 輸入品牌名稱 + 頁尾諮詢表單 */
    .inputBox {
        max-width:380px;
    }
    .inputBox input,
    .inputBox .btn-go {
        height: 45px;
    }
    .inputBox input {
        padding-left: 1em;
    }
    .guide-arrow {
        left: 0.75rem;
        bottom: 4em;
    }
    .scroll-arrow {
        bottom: 4em;
    }
}



/* ─────────────────────────────────────────
    區域 footer
───────────────────────────────────────── */
footer {
    background: var(--dark-bg);
    color: var(--white);
    position: relative;
}
footer > .container {
    padding-top: 3.75em ;
}
footer p {
	line-height: 1.3;
}
footer p,
footer ul {
	font-size: 18px;
    font-weight: 400;
}
footer a,
footer a:hover {
	color: var(--white);
	text-decoration: none;
}

.footer_logo img {
    width:12em;
    margin-bottom: 1.5rem;
}

.footer_circles {
    text-align: right;
}
.footer_circles img {
    width: 100%;
    max-width: 650px;
}

/* 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 橫式 lg ~ 桌上型 xl*/
@media (min-width: 992px) {
    footer > .container {
        position: relative;
        padding-bottom: 1em;
    }
    .footer_circles {
        position: absolute;
        right: .75rem;
        bottom: 0;
        z-index: 1;
    }
    /* SNS 社交圖示 */ 
    .footer-sns {
        position: absolute;
        top: 4em;
        right: .75rem;
    } 
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .footer_circles img {
        max-width: 550px;
    }
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .footer_circles img {
        max-width: 500px;
    }
}


/*手機版*/
@media (max-width: 767.98px) {
    footer > .container {
        padding-top: 4em ;  /*設計#email下錨點文字不會被Header蓋住*/
    }
    footer p,
    footer ul {
        font-size: 14.5px;
    }
    .footer_logo img {
        width:10em;
    }
    .footer_circles {
        text-align: center;
    }
    .footer_circles img {
        width:90%;
    }
}



/* ─────────────────────────────────────────
    測驗 quiz
───────────────────────────────────────── */
#quiz > section {
    display: none;
}
#quiz > section.active {
    display: block;
    animation:fadeIn 1s ease-in-out both;
}

.quizBox {
    background: var(--quiz-bg);
    padding: 10vh 0 7vh;
}
.quizBox .imgBox {
    margin-bottom: 1.25rem;
}
.quizBox .btn.min-w {
    min-width: 300px;
}
.quizBox .quiz-btngroup {
    width:600px;
    margin: 0 auto;
}


/*大螢幕桌上型*/
@media (min-width: 1600px) {
    .quizBox {
        padding-top: 11.5vh;
    }
    .quizBox .imgBox img {
        height: 52vh !important;
    }
}


/*ipad 橫式 lg ~ 桌上型 xl*/
@media (min-width: 992px) {
    .quizBox .imgBox img {
        max-width:none !important;
        width: auto !important;
        height: 45vh;
    }
}


/*手機版*/
@media (max-width: 767.98px) {
    .quizBox {
        padding: 8vh 0 6vh;
    }
    .quizBox .quiz-btngroup {
        width:auto;
    }
}



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

.btn {
    padding: 0.5rem 2.5rem;
    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;
}

/* 行動按鈕cta */
.btn-cta {
    background: var(--orange);
    /*border-radius: 5px;*/
    border-radius:var(--radius);
    color: var(--white);
    padding: 0.6rem 3rem;
}
.btn-cta:hover,
.btn-cta:focus {
    background: var(--black);
    color: var(--white);
}
.bg-black .btn-cta:hover,
.bg-black .btn-cta:focus {
    background: var(--orange);
    filter: brightness(130%);
    
}


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

.btn-close {
	z-index: 1;
    opacity: 1;
	transition: all 0.5s ease-out;
    padding: 2rem;
    color:var(--white);
    background: url(../images/x.svg) center / 4em auto no-repeat;
    background-color:var(--orange);
    border-radius: var(--radius50);
}
.btn-close:hover,
.btn-close:focus {
	transform: rotate(180deg);
    opacity: 1;
}

/* --- hero 主選單 nav --- */
.btn-nav {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
    border-radius: var(--radius);
    padding: 6px 15px;
    text-decoration: none;
    background-color: var(--white);
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.btn-nav.dark {
    background: var(--black);
    border-color: var(--black);
    color: var(--orange);
}
.btn-nav.dark span {
    color:var(--white)
}
.btn-nav:hover,
.btn-nav:focus {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

/*大螢幕桌上型*/
@media (min-width: 1600px) {
    .btn {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    } 
}

/*ipad 直式 md ~ 桌上型 xl*/
@media (min-width: 768px) {
    .btn-nav {
        min-width: 9em;
        text-align: center;
    }
    .btn-nav.dark {
        text-align: right;
    }
    .btn-nav.dark span {
        text-align: right;
        margin-left: 1.35em;
    }
}


/*手機版*/
@media (max-width: 767.98px) {
    .hero-nav {
        gap: 4px;
    }
    /* 行動按鈕cta */
    .btn-cta {
        padding: 0.35rem 2.75rem;
    }
    .btn-close {
        padding: 1rem;
        background: url(../images/x.svg) center / 2.25em auto no-repeat;
        background-color:var(--orange);
    }
    .btn-outline {
        padding: 0.5rem 1.5rem;
    }
}


/* ─────────────────────────────────────────
    翻牌
───────────────────────────────────────── */
.cardBox {
	display:flex;
    margin-top: 1.5rem;
}
.cardBox .card {
	height:100%;
	box-sizing:border-box;
	border:none;
	border-radius: var(--radius);
	box-shadow: 0 3px 10px rgba(0,0,0,0.25);  /*外陰影*/
	position: relative;
	transition: all 0.5s ease-in-out;
	transform:scale(1.0);
}
.cardBox .card .card-body {
	flex: 1 1 auto;
    padding: 0;
}
.cardBox .card .card-body hgroup {
	padding: 1.25rem 2rem;
}
.cardBox .card .card-body hgroup h3 {
    margin-bottom: 0.75rem;
}


/********************** 翻牌區 start ************************/
.cardGroup {
	perspective: 1000px;
}
.flop {
	background-color:var(--orange);
	color:var(--white);
}
.cardBox .card.flop .card-body hgroup {
	padding: 2.75rem;
    padding-right: 1.75rem;
}
.cardBox .card.flop .card-body hgroup h5 {
    line-height: 1.6;
}
.cardWrapper {
	position: relative;
	aspect-ratio:0.8;  /*尺寸*/
	transform-style: preserve-3d;
	transition: transform 0.5s;
}
.cardGroup:hover .cardWrapper{
	transform:rotateY(180deg);
}


.cardWrapper .card {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	transition:none;
	transform:none;
	backface-visibility: hidden;
	z-index: 0;
}
.cardWrapper .card:hover{
	transform:none;
	box-shadow:none;
}
.cardWrapper .card.flop{
	transform: rotateY(180deg);
	z-index: 1;
}


/*大螢幕桌上型*/
@media (min-width: 1600px) {
	.cardWrapper{
		aspect-ratio:0.95;
	}
}

/*ipad 橫式 lg*/
@media (min-width: 992px) and (max-width: 1199.98px){
	.cardWrapper{
		aspect-ratio:0.675;
	}
    .cardBox .card.flop .card-body hgroup {
        padding: 2rem;
        padding-right: 1.5rem;
    }
}

/*ipad 直式 md*/
@media (min-width: 768px) and (max-width: 991.98px){	
	.cardWrapper{
		aspect-ratio:0.525;
	}
    .cardBox .card .card-body hgroup {
        padding: 1.25rem;
    }
    .cardBox .card.flop .card-body hgroup {
        padding: 0.75rem 1.25rem 0;
        padding-right: 0.5rem;
    }
}


/*手機版*/
@media (max-width: 767.98px) { 
    .cardBox {
        margin-top: 0.75rem;
    }
	/*正反翻牌*/
	.cardWrapper{
		aspect-ratio:0.95;
	}
    .cardBox .card.flop .card-body hgroup {
        padding: 2.25rem;
        padding-right: 1.5rem;
    }
    .cardBox .card.flop .card-body hgroup h5 {
        font-size: 1.5em;
        line-height: 1.75;
    }
}

@media (min-width: 570px) and (max-width: 767.98px){	
	.cardWrapper{
		aspect-ratio:1.2;
	}	
}

@media (max-width: 390.98px){	
	/*正反翻牌*/
	.cardWrapper{
		aspect-ratio:0.88;
	}	
}


/********************** 翻牌區 end ************************/


/* ─────────────────────────────────────────
    其它
───────────────────────────────────────── */
ul.no123 li + li {
    margin-top: 1.15em;
}
ul.no123 img {
    width: 9.5em;
}
ul.no123 .card .card-body {
    padding: 2rem;
    padding-left: 1.25rem;
}

.imgBox img {
    height: 60vh;
}

/*ipad 直式 md ~ ipad 橫式 lg*/
@media (min-width: 768px) and (max-width: 1199.98px) {
    ul.no123 img {
        width: 8em;
    }
    ul.no123 .card .card-body {
        padding: 1.25rem 1.5rem 1.25rem 0.75rem;
    }
    .imgBox img {
        max-width:none !important;
        width: auto !important;
        height: 35vh;
    }
}

/*手機版*/
@media (max-width: 767.98px) {
    ul.no123 img {
        width: 5.75em;
    }
    ul.no123 .card .card-body {
        padding: 1rem 1.25rem 1rem 0.75rem;
    }
    ul.no123 .card .card-body p {
        line-height: 1.25;
    }
    .imgBox img {
        max-width:none !important;
        width: auto !important;
        height: 30vh;
    }
}

/*選個好地址*/
.address img {
    max-width: 55%;
}

/*完工禮讚：從專屬信箱開始*/
.tw-email {
    padding-bottom: 0 !important;
}
.tw-email img {
    max-width: 100%;
    width: 36vw;
}


/*ipad 直式 md 以上*/
@media (min-width: 768px) {
    .tw-email .row,
    .tw-email .row .container {
        padding-right: 0;
    }
}

/*桌上型 xl*/
@media (min-width: 1250px) {
    .tw-email h2 {
        width: 32vw;
    }
    .tw-email hgroup {
        white-space: nowrap;
        position: relative;
        z-index: 2; /*因為不折行,設定字壓在圖上*/
    }
    .tw-email img {
        width: 32vw;
        position: relative;
        z-index: 1;
    }
}




/* ─────────────────────────────────────────
    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;
}

/*桌上型 xl*/
@media (min-width:1200px) { 
	/*位移效果-X軸往左移動*/
	.effect-moveL {
		transition: transform 0.5s;
		display:block;
	}
	.effect-moveL:focus,
	.effect-moveL:hover {
		transform: translateX(-5px);
	}
	
	/*位移效果-Y軸往上移動*/
	.effect-moveT {
		transition: transform 0.5s;
		display:block;
	}
	.effect-moveT:focus,
	.effect-moveT:hover {
		transform: translateY(-5px);
	}
}

/*自動播放-進場動畫 淡入 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;
	}
}


/* 自動輪播-上下擺動loop */
.eff-yloop {
	animation: yloop 1s ease-in-out both infinite alternate;
}
@keyframes yloop {
	0% {
		transform:translatey(0%); 
	}	
	100% {
		transform:translatey(-5%);
	}
}

.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); /*backdrop-filter 背景濾鏡模糊*/
	-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 .btn-close {
    position: absolute;
    top:-2em;
    right:-2em;
}

/*手機版*/
@media (max-width: 767.98px) {
    .modal .btn-close {
        top: -1em;
        right: -1em;
    }
}

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