@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
/* 設定CSS變數 */
:root{    
    --pri01:#CA1E1D; /*主色-紅*/
    --pri01o:#D71918; /*原主色-紅*/
	--pri02:#FF71A5; /*主輔色-粉紅*/
    --pri02n:#E1A5CD; /*主輔色-粉紅(new)*/
    --pri03:#00CDDC; /*主輔色-粉藍*/
    --pri04:#8C61F0; /*輔色-亮紫*/
    --pri05:#79FF7A; /*輔色-亮綠*/
    --pri06:#00B1BE; /*輔色-粉藍2*/
    --com01:#000;
	--com02:#444;
	--com03:#AAA;
	--com04:#DDD;
	
	--sec01:#CA1E1D; /* 樣式二, 主色-紅 */
	--sec02:#E1A5CD; /* 樣式二, 輔色-粉紅 */
	--sec03:#FFD75A; /* 樣式二, 輔色-黃 */
	--sec04:#A09B96; /* 樣式二, 輔色-深灰 */
	--sec05:#EBE6DC; /* 樣式二, 輔色-淺灰 */
	--sec06:#FFA26C; /* 樣式二, 輔色-菊 */
	
	--fsXS:1.2rem; 	/* font size XS */
	--fsS: 1.6rem; 	/* font size S */
	--fsP: 2rem; 	/* font size P */
	--fsM: 2.6rem; 	/* font size M */
	--fsM2:3rem; 	/* font size M2 */
	--fsL: 3.6rem; 	/* font size L */
	--fsXL:4.6rem; 	/* font size XL */
	--fsXL2:5.6rem; /* font size XL2 */
	
	--maxW:1440px;	/* general max-width */
	--pd:4rem; 					/* 通用間隔 */
	--pdh:calc(var(--pd)/2); 	/* 通用間隔1/2 */
	--pdq:calc(var(--pd)*2/3); 	/* 通用間隔2/3 */
	--pd2:calc(var(--pd)*2); 	/* 通用間隔x2 */
	--pd3:calc(var(--pd)*3); 	/* 通用間隔x3 */
	--navH:6.26rem; /* 預設主選單高度,js更新 */

	
    
    --gradient01: linear-gradient(-45deg, #FFE6FA 0%, #E3FDF5 100%); /* 漸層01 */
    --gradient01B: linear-gradient(0deg, #FFF, #F5F5F5 50%, #FFF 100%); /* 案例使用 */
    --gradient02: linear-gradient(0deg, #FF71A5 0%, #79FF7A 100%); /* 漸層02 粉到綠 */
    --gradient03: linear-gradient(0deg, #FF71A5 0%, #8C61F0 100%); /* 漸層03 */
    --gradient04: linear-gradient(0deg, #8C61F0 0%, #0EC2DE 100%); /* 漸層04 */
    --gradient05: linear-gradient(0deg, #00CDDC 0%, #E3FDF5 100%); /* 漸層05 */
    --gradient06: linear-gradient(0deg, #79FF7A 0%, #00CDDC 50%, #8C61F0 100%); /* 漸層06 */
    --gradient07: linear-gradient(0deg, #FF71A5 0%, #8C61F0 50%, #79FF7A 100%); /* 漸層07 */
    --gradient08: linear-gradient(0deg, #8C61F0 0%, #00CDDC 50%, #79FF7A 100%); /* 漸層08 */
    --gradient09: linear-gradient(0deg, #FF71A5 0%, #8C61F0 50%, #00CDDC 100%); /* 漸層09 */
    --gradient10: linear-gradient(0deg, #F6C074 0%, #DB7482 30%, #8866AD 50%, #4852B0 100%); /* 漸層10 */
    --gradient11: linear-gradient(90deg, #33AEE4 0%, #6384EB 30%, #915DF1 50%, #C430F7 100%); /* 漸層11 */
    --gradient12: linear-gradient(0deg, #FAC4AA 0%, #C89AB4 30%, #856CBE 50%, #4144C4 100%); /* 漸層12 */
    --gradient13: linear-gradient(0deg, #FD5393 0%, #F86E68 100%); /* 漸層13 */
    --gradient14: linear-gradient(0deg, #F189E3 0%, #F277B8 30%, #F4648B 100%); /* 漸層14 */
    --gradient15: linear-gradient(0deg, #E9F7F6 0%, #F1F1F7 50%, #F7ECF8 100%); /* 內頁背景 */
    --gradient16: linear-gradient(0deg, #4144C4 0%, #856CBE 30%, #C89AB4 50%, #FAC4AA 100%); /* 漸層12相反 */
    --gradient17: linear-gradient(0deg, #00CDDC 0%, #3DE6AB 30%, #3DE6AB 50%, #79FF7A 100%);
    --gradient18: linear-gradient(0deg, #4852B0 0%, #8866AD 30%, #DB7482 50%, #F6C074 100%);
    --gradient19: linear-gradient(90deg, #FFD75A 0%, #F5C680 30%, #EDBA9D 50%, #E1A5CD 100%);
    --gradient20: linear-gradient(90deg, #C751CE 0%, #AC4EEA 30%, #6774FF 50%, #6774FF 100%); /* 2027 標題 */
    --gradient21: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #FBDDED 0%, #E1E6FA 50%, #CFF5F9 100%); /* 2027 內頁背景 */
    --none: linear-gradient(0deg, #000 100%, #000 100%, #000 100%, #000 100%);
    
}

body, html{ font-size: 10px;} /* 1rem */
.pc, .pc640{}
.mobile, .mobile640{ display: none!important;}
.br{ display: block!important;}
.br.mobile{ display: inline-block!important;}
a{-webkit-tap-highlight-color: transparent;}
.mainContent{ overflow: hidden;}
.container{ display: block; position: relative; width: 100%; max-width: var(--maxW); margin: 0 auto; padding: 0 var(--pd); }
.container > img{ max-width: 100%;}
.container-belt{padding: 0 var(--pd); position: relative;}
.block > .container-belt{display: block; position: relative; width: 100%; max-width: var(--maxW); margin: 0 auto; padding: 0 calc(var(--pd) + var(--pd));}
.block .half{ display: inline-block; width: 50%; vertical-align: middle; padding: var(--pd);}
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}

.gdTxt{-webkit-background-clip: text; -webkit-text-fill-color: transparent!important; -webkit-box-decoration-break: clone; display: inline-block;}
.gdTxt.g01{ background-image: var(--gradient01);}
.gdTxt.g02{ background-image: var(--gradient02);}
.gdTxt.g03{ background-image: var(--gradient03);}
.gdTxt.g04{ background-image: var(--gradient04);}
.gdTxt.g05{ background-image: var(--gradient05);}
.gdTxt.g06{ background-image: var(--gradient06);}
.gdTxt.g07{ background-image: var(--gradient07);}
.gdTxt.g08{ background-image: var(--gradient08);}
.gdTxt.g09{ background-image: var(--gradient09);}
.gdTxt.g10{ background-image: var(--gradient10);}
.gdTxt.g11{ background-image: var(--gradient11);}
.gdTxt.g12{ background-image: var(--gradient12);}
.gdTxt.g13{ background-image: var(--gradient13);}
.gdTxt.g14{ background-image: var(--gradient14);}
.gdTxt.g15{ background-image: var(--gradient15);}
.gdTxt.g16{ background-image: var(--gradient16);}
.gdTxt.g19{ background-image: var(--gradient19);}
.gdTxt.g20{ background-image: var(--gradient20);}


h2,h3,h4,h5,h6{ font-weight: 500; line-height: 1.2;}

h1{display: block; padding: 0; margin: 0; font-size: 0; line-height: 0;}
h2{font-size:var(--fsL); font-weight: 700;}
h3{font-size:var(--fsL);}
h4{font-size:var(--fsM); font-weight: 700;}
h5{font-size:var(--fsM);}
h6{font-size:var(--fsP); font-weight: 700;}
p{font-size:var(--fsP); line-height: 1.5;}

h2.subject{font-size:var(--fsXL); font-weight: 700; letter-spacing: 10px; width: 100%; text-align: center; position: relative; margin-bottom: var(--pd)}
h2.subject .function{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-text-fill-color: #333!important;}
h2.subject b{display:block; font-size:var(--fsS); margin-top:5px;}

/* AIO Style 優化 */
h2.title,
h3.title{font-size: var(--fsXL); font-weight: 700; text-align: center; position: relative; margin-bottom: var(--pdh);}
h3.title{font-size: var(--fsL);}
h3.title~span,
h2.title~span{display: block; font-size:var(--fsP); font-weight: 400; margin: var(--pdh) auto 0; line-height: 1.8; text-align: center;}
h3.title~span,
h2.title~span:last-child{margin-bottom:var(--pd) ;}
h2.title+span.top{ margin-top: 0; margin-bottom: 25px;}
h2.title+span.gdTxt{ display: inline-block;}
h2.title+span.gdTxt + span{ margin-top: 0;}
h2.title+span b{font-size:var(--fsP);font-weight: 700; }
h2.title+span b.bold{font-size:var(--fsM2);color: var(--pri01);}
h2.title+span a{ margin: 5px; text-decoration: underline; color: var(--pri01);}
h2.title b{font-size:var(--fsXL2); font-weight: 900;}
h2.title b.caption { font-size: var(--fsXL); font-weight: 700; line-height: 1.3; text-align: center;}
h2.title i{ font-style: normal;}
h2.title div.pc{ display: inline-block;}
h2.title.gdTxt{ display: block; margin-left: auto; margin-right: auto;}

h2.title2{ font-size: var(--fsXL); font-weight: 700; text-align: center; position: relative; margin-bottom: var(--pdh); display: block;}
h2.title2+span{ display: inline-block; position: relative; font-size:32px; font-weight: 500; margin: var(--pdh) auto var(--pd); letter-spacing: 5px; padding-left: 5px; -webkit-text-fill-color: #333 !important;  }
h2.title2+span::before,
h2.title2+span::after{ content: ''; width: 80px; height: 0; border-bottom: 6px double #000; position: absolute; top: 50%; margin-top: -2px; left: -100px;}
h2.title2+span::after{ left: auto; right: -100px;}

h3.subtitle{font-size:var(--fsM2); font-weight: 600; }
/* AIO優化，在項目裡加入h2,h3,h4使用 */
a>h2,a>h3,a>h4,
dt>h2,
.title>h3,
li>h3,li>h4,
.item h3,
.tab-list h3{ display: inline-block!important; font-size: inherit!important; line-height: inherit!important; padding:0!important; margin:0!important; } 

/* h4.title{ font-size: var(--fsXL); font-weight: 700; text-align: center; position: relative; margin-bottom: var(--pd);}
h4.title span{ display: block; font-size:var(--fsP); font-weight: 400; margin-top: var(--pdh); line-height: 1.8;}
h4.title span.top{ margin-top: 0; margin-bottom: 25px;}
h4.title span.gdTxt{ display: inline-block;}
h4.title span.gdTxt+span{ margin-top: 0;}
h4.title span b{font-size:var(--fsP);font-weight: 700; }
h4.title span b.bold{font-size:var(--fsM2);color: var(--pri01);}
h4.title span a{ margin: 5px; text-decoration: underline; color: var(--pri01);}
h4.title b{font-size:var(--fsXL2); font-weight: 900;}
h4.title b.caption { font-size: var(--fsXL); font-weight: 700; line-height: 1.3; text-align: center;}
h4.title .subtitle{font-size:var(--fsM2); font-weight: 600; }
h4.title i{ font-style: normal;} 
h4.title div.pc{ display: inline-block;} */

/* h4.title2{ font-size: var(--fsXL); font-weight: 700; text-align: center; position: relative; margin-bottom: var(--pd); display: block;}
h4.title2 span{ display: inline-block; position: relative; font-size:32px; font-weight: 500; margin-top: 15px; letter-spacing: 5px; padding-left: 5px; -webkit-text-fill-color: #333 !important;  }
h4.title2 span::before,
h4.title2 span::after{ content: ''; width: 80px; height: 0; border-bottom: 6px double #000; position: absolute; top: 50%; margin-top: -2px; left: -100px;}
h4.title2 span::after{ left: auto; right: -100px;} */

h5.title{ text-align: center; position: relative; margin-bottom: var(--pd);}
h5.title .en{ font-family: "Roboto", sans-serif; font-size: var(--fsXL2); font-weight: 900; text-transform:uppercase; line-height: .9; letter-spacing: -1px; margin-bottom: 10px;}
h5.title .ch{ font-size: var(--fsXL); font-weight: 700;}
h5.title .note{font-size:var(--fsP); margin-top: var(--pdh); line-height: 1.5; font-weight: 400;}

h6.subtitle{ font-size: 36px; font-weight: 700; text-align: center; position: relative; margin-bottom: var(--pd);}

p b.light{ font-size:var(--fsM); text-decoration: underline; }

/* html編輯器 style */
.cke_editable *, .cke_editable *::before, .cke_editable *::after{ box-sizing: border-box;}
.cke_editable a, .cke_editable *::before, .cke_editable *::after{ display: inline-block;}

.htmlEditor .anchorbox b.title,
.cke_editable .anchorbox b.title{ font-size: var(--fsL);}

.htmlEditor,
.cke_editable { width: 100%; font-size: 2rem; }
.htmlEditor img,
.cke_editable img { max-width: 100%; margin-top:var(--pdq);}
.htmlEditor figure,
.cke_editable figure{margin-bottom:var(--pdq);}
.htmlEditor h1 img,
.cke_editable h1 img { width: 100%;}
.htmlEditor h1,
.cke_editable h1,
.htmlEditor h2,
.cke_editable h2 { font-size: var(--fsXL); font-weight: 700; margin-bottom: var(--pd); margin-top:var(--pd); position: relative;}
.htmlEditor h3,
.cke_editable h3 { font-size: var(--fsL); font-weight: 500; margin-bottom: var(--pdq); margin-top:var(--pdq); position: relative;}
.htmlEditor h4,
.cke_editable h4 { font-size: var(--fsM); font-weight: 500; margin-bottom: var(--pdq); margin-top:var(--pdq); position: relative;}
.htmlEditor h5,
.cke_editable h5 { font-size: var(--fsP); font-weight: 400; margin-bottom: var(--pdh); margin-top:var(--pdh); position: relative;}
.htmlEditor h6,
.cke_editable h6 { font-size: var(--fsS); font-weight: 400; margin-bottom: var(--pdh); margin-top:var(--pdh); position: relative;}
.htmlEditor p,
.cke_editable p { font-size: var(--fsP); font-weight: 400; margin-bottom: var(--pdh); color: #555; position: relative;}
.htmlEditor strong,
.cke_editable strong { font-weight: 700;}
.htmlEditor pre,
.cke_editable pre {}
.htmlEditor address,
.cke_editable address {}
.htmlEditor blockquote,
.cke_editable blockquote {}
.htmlEditor ol li,
.cke_editable ol li,
.htmlEditor ul li,
.cke_editable ul li {margin: 0 0 var(--pdh) 1rem; display: list-item; position: relative; font-size: var(--fsP); font-weight: 400; color: #555; position: relative;}
.htmlEditor ul li:last-child,
.cke_editable ul li:last-child {margin: 0 0 0 1rem; }
.htmlEditor ol li,
.cke_editable ol li {list-style: decimal;}
.htmlEditor ul li,
.cke_editable ul li {list-style: disc;}

.htmlEditor li > ul,.htmlEditor li > ol,.htmlEditor li > dl,.htmlEditor dt > ul,.htmlEditor dt > ol,.htmlEditor dt > dl,.htmlEditor dd > ul,.htmlEditor dd > ol,.htmlEditor dd > dl,
.cke_editable li > ul,.cke_editable li > ol,.cke_editable li > dl,.cke_editable dt > ul,.cke_editable dt > ol,.cke_editable dt > dl,.cke_editable dd > ul,.cke_editable dd > ol,.cke_editable dd > dl{margin-top: var(--pdh);}

.htmlEditor a, .htmlEditor a:link, .htmlEditor a:visited, .htmlEditor a:active, .htmlEditor area,
.cke_editable a, .cke_editable a:link, .cke_editable a:visited, .cke_editable a:active, .cke_editable area{ text-decoration: none; color: var(--pri04);}
.htmlEditor a:hover, .cke_editable a:hover{ color: var(--pri02);}
.htmlEditor a.anchor,
.cke_editable a.anchor {position: absolute; transform: translateY(-100px);}
.cke_editable a.btn { padding: 12px 30px 12px 28px; background-color: var(--pri01); font-size: var(--fsP); letter-spacing: 2px; color: #FFF; transition: .3s; border-radius: 50px; cursor: pointer;}
.htmlEditor a.btn{ color: #FFF;}


.htmlEditor table,
.cke_editable table {width: auto; font-size: var(--fsP); font-weight: 400; margin:2rem auto; border-collapse: collapse; border-spacing: 0; border: 1px solid var(--com03)!important;}
.htmlEditor table thead,
.cke_editable table thead{border-bottom: 1px solid var(--com03)!important;}
.htmlEditor table caption,
.cke_editable table caption{font-size: var(--fsM); font-weight: 600; padding: 1rem 2rem;}
.htmlEditor table caption > *,
.cke_editable table caption > *,
.htmlEditor table td > *,
.cke_editable table td > *,
.htmlEditor table th > *,
.cke_editable table th > * { margin: 0;}
.htmlEditor table td,
.cke_editable table td,
.htmlEditor table th,
.cke_editable table th{padding: 1rem 2rem; border-bottom: 1px solid var(--com03)!important; border-right: 1px solid var(--com03)!important;}
.htmlEditor table th,
.cke_editable table th{ background-color:var(--sec05);}
.htmlEditor table tr:nth-child(even) td,
.cke_editable table tr:nth-child(even) td { background-color:#f7f5f0;}

.htmlEditor table tr td:last-child,
.cke_editable table tr td:last-child,
.htmlEditor table tr th:last-child,
.cke_editable table tr th:last-child{border-right: 1px solid var(--com03)!important;}
.htmlEditor table tr:last-child td,
.cke_editable table tr:last-child td,
.htmlEditor table tr:last-child th,
.cke_editable table tr:last-child th { border-bottom: none;}


/* 舊版 */
.htmlEditor .anchorbox2,
.cke_editable .anchorbox2{display: block; width: 100%; background-color:#FDF5D8; padding:2rem 3rem;}
.htmlEditor .anchorbox2 h3,
.cke_editable .anchorbox2 h3{color: #000; font-weight: bold;}
.htmlEditor .anchorbox2 ul,
.cke_editable .anchorbox2 ul{display: block;}
.htmlEditor .anchorbox2 ul li a,
.cke_editable .anchorbox2 ul li a{ color: #000;}

/* 新版，與網站共用樣式同步 */
/* dl,dt,dd 包含兩層列表，ul,li 只有一層 */
.htmlEditor .anchorbox dl, 
.htmlEditor .anchorbox ul {display: inline-block;vertical-align: top; padding: 0 4rem; margin: 3rem 0; width:calc(100%/2); } 
.htmlEditor .anchorbox dt, 
.htmlEditor .anchorbox li{display: block;font-size: var(--fsP); font-weight: 500; margin-bottom: 2rem;}
.htmlEditor .anchorbox dt a{font-weight: 500; color: #333; transition: .5s;}
.htmlEditor .anchorbox dt a:hover{ color: #000;}
.htmlEditor .anchorbox dd { display: block; margin-bottom: 1rem; font-size: var(--fsP);}
.htmlEditor .anchorbox dd a, 
.htmlEditor .anchorbox li a{ position: relative; padding-left: 2.5rem; color: #333; }
.htmlEditor .anchorbox dd a:hover, 
.htmlEditor .anchorbox li a:hover{ color: #000; }
.htmlEditor .anchorbox li a{ padding-left: 3.5rem;}
.htmlEditor .anchorbox dd a::before, 
.htmlEditor .anchorbox li a::before{ display: inline-block; position: absolute; transition: .3s; }
.htmlEditor .anchorbox dd a::before{ content: ''; width: 8px; height: 8px; background-color: var(--sec03); border-radius: 50%; top: calc(var(--fsP)/2); left: 7px;}
.htmlEditor .anchorbox li a::before{ content: 'keyboard_arrow_right'; font-size: var(--fsL); font-weight: 900; color: var(--sec02); top: calc(var(--fsP)*1.5/2); transform: translateY(-50%); left: 0;}
.htmlEditor .anchorbox dd a:hover::before{ background-color: var(--sec06); animation: anchorDotAni .3s ease-in-out;}
.htmlEditor .anchorbox li a:hover::before{ color: var(--pri01); animation: anchorArrowAni .3s ease-in-out; }
.htmlEditor .anchorbox dl:first-of-type, .anchorbox ul:first-of-type {border-right: 1px solid var(--com04); }
.htmlEditor .anchorbox dl dd + dt { margin-top: 2rem; }
.htmlEditor .anchorbox dl:nth-of-type(2) dt { margin-bottom: 2rem;}
.htmlEditor .anchorbox dd.sub { counter-reset: roman; margin-bottom: 1.5rem;}
.htmlEditor .anchorbox dd.sub a{display: block ;margin-bottom: 1rem; padding-left: 3rem; font-size: var(--fsS);}
.htmlEditor .anchorbox dd.sub a::before { counter-increment: roman; content: counter(roman, decimal) ")";  color: var(--sec04); margin-right: 0.5em; position: relative;left: 0; top: 0;background: none; width: auto;height: auto;}
.htmlEditor .anchorbox dd.sub a:hover::before{ background-color:transparent;}

.cke_editable .anchorbox dl, 
.cke_editable .anchorbox ul {display: inline-block;vertical-align: top; padding: 0 4rem; margin: 3rem 0; width:calc(100%/2); } 
.cke_editable .anchorbox dt, 
.cke_editable .anchorbox li{display: block;font-size: var(--fsP); font-weight: 500; margin-bottom: 2rem;}
.cke_editable .anchorbox dt a{font-weight: 500; color: #333; transition: .5s;}
.cke_editable .anchorbox dt a:hover{ color: #000;}
.cke_editable .anchorbox dd { display: block; margin-bottom: 1rem; font-size: var(--fsP);}
.cke_editable .anchorbox dd a, 
.cke_editable .anchorbox li a{ position: relative; padding-left: 2.5rem; color: #333; }
.cke_editable .anchorbox dd a:hover, 
.cke_editable .anchorbox li a:hover{ color: #000; }
.cke_editable .anchorbox li a{ padding-left: 3.5rem;}
.cke_editable .anchorbox dd a::before, 
.cke_editable .anchorbox li a::before{ display: inline-block; position: absolute; transition: .3s; }
.cke_editable .anchorbox dd a::before{ content: ''; width: 8px; height: 8px; background-color: var(--sec03); border-radius: 50%; top: calc(var(--fsP)/2); left: 7px;}
.cke_editable .anchorbox li a::before{ content: 'keyboard_arrow_right'; font-size: var(--fsL); font-weight: 900; color: var(--sec02); top: calc(var(--fsP)*1.5/2); transform: translateY(-50%); left: 0;}
.cke_editable .anchorbox dd a:hover::before{ background-color: var(--sec06); animation: anchorDotAni .3s ease-in-out;}
.cke_editable .anchorbox li a:hover::before{ color: var(--pri01); animation: anchorArrowAni .3s ease-in-out; }
.cke_editable .anchorbox dl:first-of-type, .anchorbox ul:first-of-type {border-right: 1px solid var(--com04); }
.cke_editable .anchorbox dl dd + dt { margin-top: 2rem; }
.cke_editable .anchorbox dl:nth-of-type(2) dt { margin-bottom: 2rem;}
.cke_editable .anchorbox dd.sub { counter-reset: roman; margin-bottom: 1.5rem;}
.cke_editable .anchorbox dd.sub a{display: block ;margin-bottom: 1rem; padding-left: 3rem; font-size: var(--fsS);}
.cke_editable .anchorbox dd.sub a::before { counter-increment: roman; content: counter(roman, decimal) ")";  color: var(--sec04); margin-right: 0.5em; position: relative;left: 0; top: 0;background: none; width: auto;height: auto;}
.cke_editable .anchorbox dd.sub a:hover::before{ background-color:transparent;}

.cke_editable .anchorbox li a::before,
.htmlEditor .anchorbox li a::before{
    font-family: 'Material Icons Outlined';
}
/* ============== 共用 Style-1 ============== */
/* 背景綠跟紅logo shape */
.bg-shape::after,
.bg-shape::before{content:""; width:812px; height:444px; background-position:center; background-repeat:no-repeat; position:absolute; z-index:-1; mix-blend-mode: multiply;}
.MobileMenuOn .bg-shape::after,
.MobileMenuOn .bg-shape::before{ mix-blend-mode: normal;}
.bg-shape::after{background-image:url(../Images/bgG.svg);}
.bg-shape::before{background-image:url(../Images/bgR02.svg);}
.bg-shape.R01::before{background-image:url(../Images/bgR01.svg);}
.bg-shape.G02::before{background-image:url(../Images/inPageBgG19.svg);}

.eventsIn.bg-shape::after{top:0; right: -350px;}
.eventsIn.bg-shape::before{bottom:-100px;left: -400px;}
.about.jobs .bg-shape::after{top:20%; left: -250px;}
.about.jobs .bg-shape::before{top:0; right: -450px;}
.laas .block.bg-shape::after{top:60%; left: -540px; opacity: 0;}
.laas .block.bg-shape::before{top:20%; right: -550px; opacity: 0;}

/* 內頁top banner */
.mainContent .inPagekv{width: 100%; height:480px; margin:0 auto; background-color:antiquewhite; border-radius:25px; margin-bottom:var(--pd); position:relative; background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: 2px 5px 24px 2px #DEDEDE; z-index: 5;}

.inPagekv dl{width:780px;background-color: rgba(255,255,255,0.8); position: absolute; padding: 20px 45px; border-radius: 22px; max-width: calc(100% - var(--pd2)); min-width: 410px; bottom: var(--pdq); left: var(--pd); /*max-width: 520px;*/}
.inPagekv dt{font-size:var(--fsL); display:block; line-height:1.4;}
.inPagekv dd{font-size:var(--fsP); margin-top:5px; font-weight: 400;}
.inPagekv dd i.hilight{ display: inline-block; font-style: normal; font-weight: 600;}
.inPagekv dd b{display: block; font-size:var(--fsM); font-weight: 600; margin-bottom: 5px;}
.inPagekv dd span b{font-size: inherit;display: inline;}
.inPagekv dd span{font-weight: 400;line-height: 1.7; }
.inPagekv dd span.red{color:var(--pri01);font-weight:600;}
/* .inPagekv dd span{font-weight:300;} */
.inPagekv dd span.small{ display:block; font-size:var(--fsS); margin-top:5px;}
.inPagekv a.btn{ font-size:var(--fsP); padding: 10px 40px; margin-top: 10px;width: fit-content; display: block; }

.search .inPagekv{background-image:url(../Images/Events/paper-banner.jpg);}

/* 內容區塊 */
.bodybox .block{ display: block; position: relative; padding: 5rem 0 5rem 0;}
.bodybox .block:last-of-type { padding: var(--pd2) 0 var(--pd2) 0;}
.block img{ max-width: 100%;}

/* 共用botton樣式 */
a.btn01{background-color:var(--pri01); border-radius:99px; padding:0 8px; line-height:30px;}
a.btn01:before{color:#FFF;}

a.btn02,
a.ci-btn1,
a.ci-btn2{background-image:url(../Images/btn-bg-red.svg); background-position:center; background-repeat:no-repeat; background-size:contain; color:#FFF; font-size:var(--fsM); padding:20px 30px; transition: .3s; filter: drop-shadow(2px 3px 3px #BBB);}
a.ci-btn2{ font-size:var(--fsS); font-weight: 700; background-image:url(../Images/btn-bg-purple.svg);}
a.btn02:hover,
a.ci-btn1:hover,
a.ci-btn2:hover{ transform: scale(1.05); filter: drop-shadow(2px 5px 6px #DEDEDE);}

/* 社群連結 */
.social-link a{width:30px; height:30px; background-position:center; background-repeat:no-repeat; background-size:cover; margin-left:10px; transition: .5s;}
.social-link a:hover{ transform: scale(1.2);}
.social-link a.in{background-image:url(../Images/ui/footerIcon01.svg);}
.social-link a.yt{background-image:url(../Images/ui/footerIcon02.svg);}
.social-link a.line{background-image:url(../Images/ui/footerIcon03.svg);}
.social-link a.fb{background-image:url(../Images/ui/footerIcon04.svg);}

/* 頁籤 */
.pages{width:100%; text-align:center; margin-bottom:80px;}
.pages a.UI{color:#000; font-size:var(--fsP); transition: .3s; vertical-align: middle;}
.pages a.UI:hover{color:var(--pri01);}
/*
.pages a.first{width:2px; height:100%;}
.pages a.lest{width:2px; height:100%;}
*/
.pages input,
.pages select{text-align:center; display: inline-block; vertical-align: middle;}
.pages span{max-width:50px; text-align:center; display:inline-block;}
.pages b{ display: inline-block; vertical-align: middle; font-size:var(--fsS); font-weight: normal;}

/* 表格 */
.tableBox{ font-size: var(--fsS); padding: 25px; border: solid 1px #999; border-radius: 25px; background-color: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.tableBox h5{ font-size: var(--fsM); margin-bottom: var(--pdh);}
.tableBox .table{display:block; width:100%;}
.tableBox .table ul{display:flex; justify-content:space-between;}
.tableBox .table li{display:inline-block; padding-bottom:20px; width:calc(50% - 5px);}
.tableBox .table li.w100{display:block; width:100%;}
.tableBox .table b{display:block;}
.tableBox .table textarea{min-height:100px; border-radius:22px;}
.tableBox .table textarea,
.tableBox .table select,
.tableBox .table input{ font-size: var(--fsS); width:100%; margin-top:5px; padding: 12px 20px; border-width: 1px;}
.tableBox .btnbox{ margin-top: var(--pd);}

.tableBox ul.vad input{ width: 50%; vertical-align: middle; margin-right: 20px;}
.tableBox ul.vad img{ display: inline-block; vertical-align: middle;}

/* 條款樣式 */
dl.rule{ font-size:var(--fsS); margin:20px 0 40px;}
dl.rule dd{font-weight:300; line-height:40px; width: 100%;}
dl.rule dt{font-size:var(--fsP); font-weight:500; margin:20px 0 10px;color:#000; width: 100%;}

dl.rule ul{margin:10px 0;}
dl.rule li, 
dl.rule ul.iii > li, 
dl.rule ul.abc > li{margin:0 0 0 30px;list-style-type:lower-alpha; display: list-item;}
dl.rule ul.number > li{list-style-type: decimal;}
dl.rule dd img{ width: 100%;}

/* 內頁常用共用列表樣式 */
/* 列表樣式01-方形圖左文右 */
.listStyle01{width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
.listStyle01 ul{width:48%; display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;}
.listStyle01 ul li{}
.listStyle01 ul li:first-child{width:20%; margin-right: 20px;}
.listStyle01 ul li:last-child{width:80%; padding-left:20px; border-left: solid 1px var(--com03);}
.listStyle01 b{display:block; font-size:25px;}
.listStyle01 span{font-size:var(--fsP);line-height: 1.7;}

/* 列表樣式02 */
.listStyle02{width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
.listStyle02 dl{}
.listStyle02 dt{}
.listStyle02 dd{font-size:30px; text-align:center; font-weight:600; line-height:35px;}
.listStyle02 b{font-size:40px;}
.listStyle02 span{font-size:var(--fsS); font-weight:400;}

/* 上圖下文垂直圖文列表 */
.articalList{font-size: 0; text-align: center;} /*text-align: center;*/
.articalList ul{ width: calc(100%/3 - 40px); text-align: left; vertical-align: middle; margin: 20px; vertical-align: top; position: relative;}
.articalList ul a{ display: inline-block; width: 100%;}
.articalList li{ width: 100%; font-size: var(--fsP); line-height: 1.2; text-align: center; padding-bottom: 10px; }
.articalList li img{ max-width: 100%; }
.articalList li.l2{ font-size: var(--fsM); font-weight: 700;}
.articalList li.l3 { line-height: 1.4;}
.articalList li.l3 b{font-size: var(--fsL); margin-left: 5px; display: inline-block;}
.articalList li.formula img{ height: 40px;}

/* 上圖下文垂直圖文有框框列表 */
.articalList.box{font-size: 0; text-align: center;}
.articalList.box ul{ width: calc(100% / 5 - 20px); vertical-align: middle;margin: 10px; vertical-align: top; padding: 2rem var(--pdh); background-color: rgba(255, 255, 255, .3); border-radius: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25); position: relative;}
.articalList.box ul:hover{ box-shadow: 0px 1px 8px rgba(255, 208, 0, 0.925);}
.articalList.box ul a{ display: inline-block;}
.articalList.box li{ width: 100%; font-size: var(--fsP); line-height: 1.4; text-align: center; padding-bottom: 10px; }
.articalList.box li img{ max-width: 100%; }
.articalList.box li.l2{ font-size: var(--fsM); display: flex; justify-content: center; align-items: center; font-weight: 700; }
.articalList.box li.l3 { line-height: 1.4; display: flex;justify-content: center; align-items: center;}
.articalList.box li.l3 b{font-size: var(--fsL); margin-left: 5px; display: inline-block;}

/* 上圖下文垂直圖文有circle和框列表 */
.articalList.circle{font-size: 0; text-align: center;}
.articalList.circle ul{ width: calc(100% / 3 - 40px); vertical-align: middle; margin:80px 20px 20px 20px; vertical-align: top; padding: 10rem  var(--pdh) 2rem var(--pdh); background-color: rgba(255, 255, 255, .3); border-radius: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25); position: relative;}
.articalList.circle li{ width: 100%; font-size: var(--fsP); line-height: 1.4; text-align: center;}
.articalList.circle img{ max-width: 100%; display: inline-block;}

.articalList.circle{ position: relative;}
.articalList.circle .item{ display: inline;}

.articalList.circle .l1{ z-index: 1; position: absolute;top: -70px;left: 50%;transform: translate(-50%);text-align: center;width: 150px; height: 150px; background-color: #FFF;box-shadow: 0px 1px 8px rgba(0, 0, 0, .10);  border-radius: 50%; display: block;}
.articalList.circle li.l2{ white-space: nowrap; font-size: var(--fsM); display: inline-block; font-weight: 700; }
.articalList.circle li.l3 { line-height: 1.4; display: flex;justify-content: center; align-items: center; padding-bottom:0;}
.articalList.circle li.l3 b{font-size: var(--fsL); margin-left: 5px; display: inline-block;}
.articalList.circle li.l2 div.pc { display: inline-block;}

/* ex:product/pos/p4 */
.articalList.s2{ position: relative; padding: 0 var(--pd); overflow: hidden;}
.articalList.s2 a.UI{font-size: var(--fsXL); color: var(--sec04); width: 60px; height: 60px;background-color: #FFF; border-radius: 50%; position: absolute; z-index: 5; top: 50%; transform: translateY(-65%); transition: .3s; border: 2px solid var(--sec05);}
.articalList.s2 a.UI::before{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.articalList.s2 a.UI.prev{ left: 5px;}
.articalList.s2 a.UI.next{ right: 5px;}
.articalList.s2 a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}
.articalList.s2 .group{ padding: 2rem 0; white-space: nowrap; overflow: hidden; width: 100%;}
.articalList.s2 .group ul{ width: calc(100%/4 - 40px); padding: 50px 10px; white-space:normal; background-color: transparent; border-radius: 25px; transition: .3s;}
.articalList.s2 .group ul:hover{ background-color: #FFF; filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); }
.articalList.s2 .group ul li{ color: var(--com02);}

/* img-only ex:product/pos/p5 */
.articalList.s2.img-only a.UI{transform: translateY(-50%);}
.articalList.s2.img-only .group{ padding: 10px 0;}
.articalList.s2.img-only .group ul{ width: calc(100%/3 - 40px); padding: 0; overflow: hidden; background-color: #FFF;  /*border: 2px solid var(--sec05);*/ }
.articalList.s2.img-only .group ul li{ padding-bottom: 0; font-size: 0;}


/* 客戶案例圖文列表 */
.caseDemoList{width: 100%; position:relative; text-align: center;}
.caseDemoList a.UI{position:absolute; top:calc(50% - 80px); color: #555; transition: .3s;}
.caseDemoList a.UI:hover{ color: var(--pri01);}
.caseDemoList a.UI::before{font-size:60px;}
.caseDemoList a.UI.prev{left:0;}
.caseDemoList a.UI.next{right:0;}
.caseDemoList ul{ width: calc(100% - 120px); margin:0 auto; padding-top: 2rem; position:relative; font-size: 0; white-space: nowrap; overflow: hidden;}
.caseDemoList li a{width:100%; color: #000;}
.caseDemoList li{width:calc((100% / 3) - 30px); text-align:left; display:inline-block; vertical-align: top; margin: 0 15px; transition: .3s; }
.caseDemoList li i.label{font-size: var(--fsP); font-style: normal; font-weight: bold; padding: 8px 20px; position: absolute; color: #FFF; background-color: var(--pri01); border-radius:25px 0 25px 0; z-index: 1;}
.caseDemoList li .pic{width:100%; border-radius:25px; padding-top:60%; background-position:center; background-repeat:no-repeat; background-size:100% 100%; filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5)); transition: .5s;}
.caseDemoList li b{ white-space: normal; font-size: var(--fsM); margin: 18px 0 5px; transition: .3s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis;}
.caseDemoList li span{font-size: var(--fsS); width: 100%; white-space: normal; transition: .1s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; text-overflow: ellipsis;}
.caseDemoList li:hover b{ color: var(--pri01);}
.caseDemoList li:hover span{ color: var(--com02);}
.caseDemoList li:hover .pic{ background-size:105% 105%; filter: drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.5));}

/* ex:product/pos/p7 */
.caseDemoList.s2 ul{ padding: 10px 0;}
.caseDemoList.s2 a{ display: inline-block; width: 100%;}
.caseDemoList.s2 a.UI{color: var(--sec04); width: 60px; height: 60px;background-color: #FFF; border-radius: 50%; position: absolute; z-index: 5; top: 50%; transform: translateY(-65%); transition: .3s; border: 2px solid var(--sec05);}
.caseDemoList.s2 a.UI::before{ font-size: var(--fsXL); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.caseDemoList.s2 a.UI.prev{ left: 5px;}
.caseDemoList.s2 a.UI.next{ right: 5px;}
.caseDemoList.s2 a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}
.caseDemoList.s2 li{ background-color: #FFF; border-radius: 25px;}
.caseDemoList.s2 .pic{padding-top: 56.25%; border-radius: 25px 25px 0 0;}
.caseDemoList.s2 b{ font-size: var(--fsM); font-weight: 700; text-align: center; margin: 10px 0; transition: .3s;}
.caseDemoList.s2 li:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3));}
.caseDemoList.s2 li:hover b{ color: var(--sec02);}

/* 客戶logo列表caseLogoList from case-study */
.caseLogoList{ display: inline-block; width: 100%; /*margin-bottom: var(--pd);*/ white-space: nowrap; text-align: center;}
.caseLogoList a.UI{ font-size: 50px; color: #555;}
.caseLogoList a.UI:hover{ color: var(--pri01);}
.caseLogoList a.UI,
.caseLogoList .listBox { display: inline-block; vertical-align: middle;}
.caseLogoList .listBox { width: calc(100% - 100px); overflow: hidden; font-size: 0; }
.caseLogoList .listBox .item_group{ text-align: left; }
.caseLogoList .listBox li{ width: calc(100%/5 - 20px); margin: 10px;  position: relative;}
.caseLogoList .listBox li i{ width:100%; background-color: #FFF; overflow: hidden;  border-radius: 25px; position: absolute; top: 0; left: 0; background-size: 70%; background-position: center; background-repeat: no-repeat; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); }
.index .caseLogoList .listBox li{overflow:hidden;}
.index .caseLogoList .listBox li i{width:100%;}
.caseLogoList .listBox li::after,
.caseLogoList .listBox li i::after{ content: ''; display: block; padding-top: 100%;}

/* ex:industry/beverage/b3 */
.caseLogoList.s2{position: relative;}
.caseLogoList.s2 .listBox li{ width: calc(100%/5 - 40px); margin: 10px 20px; /*overflow: hidden;*/}
.caseLogoList.s2 .listBox li i{width: 100%; height: 100%;}
.caseLogoList.s2 a.UI{color: var(--sec04); width: 60px; height: 60px;background-color: #FFF; border-radius: 50%; position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); transition: .3s; border: 2px solid var(--sec05);}
.caseLogoList.s2 a.UI::before{ font-size: var(--fsXL); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.caseLogoList.s2 a.UI.prev{ left: 0;}
.caseLogoList.s2 a.UI.next{ right: 0;}
.caseLogoList.s2 a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}
.caseLogoList.s2 .progress{width: calc(100% - 100px); height: 12px; padding: 3px; background-color: var(--sec05); border-radius: 6px; margin: 20px auto 0; opacity: 0; transition: 1s; position: relative; font-size: 0; overflow: hidden;}
.caseLogoList.s2:hover .progress{ opacity: 1;}
.caseLogoList.s2 .progress b{ width: 10%; height: 6px; background-color: #FFF; border-radius: 5px; display: inline-block;position: absolute; top: 3px; left: 3px; margin: 0 3px;}

/* ex:why-wixtar */
.caseLogoList.why{ white-space: normal; text-align: left; position: relative;}
.caseLogoList.why .listBox{ width: 100%; }
.caseLogoList.why .listBox > div{ position: absolute; }
.caseLogoList.why .listBox li{width: calc(100% / 6 - 30px); }
.caseLogoList.why .pager{ text-align: center; margin-top: 1rem;}
.caseLogoList.why .pager a{ width: 10px; height: 10px; border-radius: 50%; margin: 0 1rem; display: inline-block; vertical-align: middle; background-color: #D9D9D9; transition: .3s;}
.caseLogoList.why .pager a.UI{ font-size: 0; width: auto; height: auto; border-radius: 50%; margin: 0 5px; background-color: transparent!important; color: #D9D9D9; }
.caseLogoList.why .pager a.UI::before{ font-size: var(--fsL);}
.caseLogoList.why .pager a.focus,
.caseLogoList.why .pager a:hover{ background-color: var(--sec02);}
.caseLogoList.why .pager a.UI:hover{ color: var(--sec02);}

.caseLogoList.why .listBox li:nth-of-type(6n+1){margin-left: 75px;}
.caseLogoList.why .listBox li:nth-of-type(6n+6){margin-right: 0px;}
.caseLogoList.why .listBox li:nth-of-type(12n+7){ margin-left: 5px;}


/* 雙排支付logo列表 from about*/
.partnerList{display: inline-block; position: relative;width: 100%; margin-bottom: var(--pd); white-space: nowrap; text-align: center;}
.partnerList .listBox{ display: inline-block; vertical-align: middle;}
.partnerList .listBox { width: calc(100% - 100px); overflow: hidden; font-size: 0; }
.partnerList .listBox .ditem{width: calc(100%/4 - 20px); margin: 10px; display: inline-flex; flex-direction: column;}
.partnerList .listBox .ditem a{ width: 100%; background-color: #FFF; border-radius: 25px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .10); background-size: contain; background-position: center; background-repeat: no-repeat;}
.partnerList .listBox .ditem a:first-child{ margin-bottom: 20px;}
.partnerList .listBox .ditem a::after{ content: ''; display: block; padding-top: 53.571%;}
.partnerList a.UI{color: var(--sec04); width: 60px; height: 60px;background-color: #FFF; border-radius: 50%; position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); transition: .3s; border: 2px solid var(--sec05);}
.partnerList a.UI::before{ font-size: var(--fsXL); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.partnerList a.UI.prev{ left: 0;}
.partnerList a.UI.next{ right: 0;}
.partnerList a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}


/* ============== 共用 Style-2 ============== */
/* pager */
.pager{padding: 2rem 0 0 0;}
.pager a{ font-size: 0; background-color: var(--com04); width: 10px; height: 10px; margin: 0 5px; padding: 0; border-radius: 10px; display: inline-block; transition: .3s;}
.pager a.focus,
.pager a:hover{ background-color: var(--sec02);}

/* lightbox form 茶飲頁 */
.popupbox{ position:fixed; width:100%; height:100vh; background-color:rgba(0,0,0,0.8); top:0;left:0; z-index:999; display:none;}
.popupbox.show{ display: flex; justify-content: center; align-items: center;}
.popupbox b.bg{ display: block; position: absolute; width:100%; height:100%; top: 0; left: 0; z-index: 1;}
.popupbox .content{display:inline-block; position: relative; width: 80%; min-width: 600px; max-height: 80vh; z-index: 5; }
.popupbox a.close{ color: #FFF; font-size: 0; position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 9; transition: .3s;}
.popupbox a.close::before{font-size: var(--fsM2);}
.popupbox a.close:hover{ color: var(--pri01);}
/* lightbox 不同內容 */
/*.popupbox .content.vid{display:inline-flex; justify-content: center;}*/
.popupbox .content.vid video{ border-radius: 20px; max-width: 100%; max-height: 100%; }
.popupbox .content.youtube{}
.popupbox .content.youtube::after{ content: ""; display: block; padding-top: 56.25%;}
.popupbox .content.youtube iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px;}

/* lightbox form 烘焙頁 */
.popupbox .photo{display:inline-block; position: relative; width: 80%; min-width: 600px; padding: 2rem; max-height: 80vh; z-index: 5;background-color:#FFF9E5;border-radius: 20px;display: flex;justify-content: center;align-items: center; }
.popupbox .photo img{ max-width: 100%; max-height: 80vh; padding: 2rem;}

/* 麵包屑breadcrumbs */
.breadcrumbs{ display: block; font-size: var(--fsP); margin-bottom: var(--pd);}
.breadcrumbs > a span{ display: inline-block; vertical-align: middle; color: #000;}
.breadcrumbs > a::after {content: 'keyboard_arrow_right'; color: #595959; margin: 0 5px;}
.breadcrumbs > a:last-child::after{display: none;}
.breadcrumbs > a.home span{display: none;}
.breadcrumbs > a.home::before{ content: ""; width: 32px; height: 32px; background: url('../Images/ui/bread_home.svg') no-repeat center; background-size: contain; display: inline-block; vertical-align: middle;}

/* 內頁top banner */
.topbanner{ width: 100%; padding: var(--pd) 0 var(--pd2); font-size: 0;}
/*.topbanner .container{ display: block;}*/
.topbanner .group{width: calc(50% - var(--pd2));}
.topbanner .group,
.topbanner .mov{ display: inline-block; vertical-align: middle; }
.topbanner h6,
.topbanner h1{ font-size: var(--fsM); font-weight: 700; margin-bottom: var(--pdh); line-height: 1.3;}
.topbanner p{ font-weight: 400; margin-bottom: var(--pdh); text-align: left;}
.topbanner p+a{ margin-top: var(--pdh);}
.topbanner .mov{ width: calc(50% - 30px); margin: 30px 30px 0 var(--pd2); position: relative; }
.topbanner .mov video,
.topbanner .mov img{width: 100%; border-radius: 20px; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); position: relative; margin-left: 0;}
.topbanner .mov::after{ content: ''; width: 100%; height: 100%; position: absolute; top:-30px; right: -30px; z-index: -1; border-radius: 20px; background: linear-gradient(180deg, #EBE6DC 0%, #FFFFFF 100%);}
.topbanner .mov a.play{font-size: var(--fsP); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px 20px; background-color: var(--pri01); z-index: 5; color: #FFF; border-radius: 20px; transition: .3s; text-align: center;}
.topbanner .mov a.play span{ display: inline-block; vertical-align: middle;}
.topbanner .mov a.play::before{ margin-right: 5px;}
.topbanner .mov a.play:hover{ transform: translate(-50%, -50%) scale(1.05);}

/* tab標籤列表 */
ul.tabList{ display: inline-block; width: 100%; font-size: 0;}
ul.tabList > li{ display:inline-block; padding: 10px; vertical-align: top; width: calc(100% / 3);}
ul.tabList b.head{ display: inline-block; width: 100%; text-align: center; font-size: var(--fsM); font-weight: 700; background-color: var(--sec05); border-radius: 25px 25px 0 0; padding: 20px; margin-bottom: var(--pd);}
ul.tabList b.head::before{font-size: var(--fsL); margin-right: 10px; vertical-align: middle;}
ul.tabList b.head span{ display: inline-block; vertical-align: middle;}
ul.tabList ul.list{ font-size: var(--fsP);}
ul.tabList ul.list li{ padding: 0px 10px 30px 40px;  }
ul.tabList ul.list li.head{ font-size: var(--fsM); font-weight: 700; position: relative; padding-bottom: 0px;display: block;}
ul.tabList ul.list li.head::before{ content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--sec02); position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}

/* icon標籤列表 */
.iconList{ display: flex; justify-content: space-around; width: 100%; font-size: 0;}
.iconList > div{ display: inline-block; width: 30%; background-color: rgba(255,255,255,.3); padding: var(--pd) var(--pdh); border-radius: 20px; box-shadow: 0px 1px 8px rgba(0,0,0,.25); text-align: center;}
.iconList > div::before{ font-size: 70px; color: var(--sec03);}
/* .iconList h6 為舊版準備2027上線前刪除 */
.iconList h6, 
.iconList h3{ display: inline-block; width: 100%; text-align: center; font-size: var(--fsM); font-weight: 600; margin: var(--pdq) 0;}
.iconList ul.list{ width: 80%; font-size: var(--fsP);text-align: left;}
.iconList ul.list li{ padding: 0px 10px 30px 40px; }
.iconList ul.list li.head{ font-size: var(--fsP); font-weight: 400; position: relative; padding-bottom: 0px;}
.iconList ul.list li.head::before{ content: 'done'; font-size: 14px; color: #FFF; padding: 2px; border-radius: 50%; background-color: var(--sec03); position: absolute; left: 10px; top: calc(var(--fsP)/2 - 4px);}

/* 諮詢banner consultBanner form TQG */
.consultBanner{ width: 100%; height: 475px; padding: var(--pdh); border-radius: 30px; background-image: url(../Images/product/TQGforecast/consult_banner.jpg); background-position: center; display: flex; align-items: center; justify-content: flex-start; position: relative;}
.consultBanner a.btn{ font-size: var(--fsM); font-weight: 700;}
.consultBanner dl{ display:inline-block; width: 50%; position: relative; z-index: 2;}
.consultBanner dt,
.consultBanner dd{ margin-bottom: var(--pdh); display: block; text-align: center;}
.consultBanner dd:last-child{ margin-bottom: 0;}
.consultBanner dt{ font-size: var(--fsL); font-weight: 900; line-height: 1.4;}
.consultBanner dd{ font-size: var(--fsM); }

.consultBanner.last::after{ content: ""; border-radius: 30px; display: block; width: 100%; height: 30%; position: absolute; bottom: -1px; left: 0; background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%) ; z-index: 1;}

/* 客戶證言 eval_list form TQG */
.eval_list{ display: block; width: 100%; margin: 0 auto; font-size: 0; overflow: hidden;}
.eval_list .list{ white-space: nowrap;}
.eval_list .item{ font-size: 0; display: inline-block; width: calc(100%/3 - 2rem); margin: 0 1rem; vertical-align: top; padding: 4rem 15px; border-radius: 4rem; border: 1px solid #CECDCB; background: linear-gradient(360deg, rgba(235, 230, 220, 0.2) 0%, rgba(255, 255, 255, 0.2) 70.92%);}
.eval_list .item li{ display: block; width: 100%; text-align: center; white-space: normal; position: relative;}
.eval_list .item .e1{ width: calc(100% + 15px + 15px); margin-left: -15px; font-size: var(--fsL); line-height: 1; color: var(--pri01); font-weight: 900; white-space: nowrap; margin-top: 1rem;}
.eval_list .item .e1::after{ content: ""; width: 100%; padding-top: 25%; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%); background: url(../Images/product/TQGforecast/Num1.svg) no-repeat center ; background-size: contain;}
.eval_list .item.v1 .e1::after{ background-image: url(../Images/product/TQGforecast/Num1.svg) ;}
.eval_list .item.v2 .e1::after{ background-image: url(../Images/product/TQGforecast/Num2.svg) ;}
.eval_list .item.v3 .e1::after{ background-image: url(../Images/product/TQGforecast/Num3.svg) ;}
.eval_list .item.v4 .e1::after{ background-image: url(../Images/product/TQGforecast/Num4.svg) ;}
.eval_list .item.v5 .e1::after{ background-image: url(../Images/product/TQGforecast/Num5.svg) ;}
.eval_list .item.v6 .e1::after{ background-image: url(../Images/product/TQGforecast/Num6.svg) ;}

.eval_list .item .e2,
.eval_list .item .e3{ display: flex; align-items: center; justify-content: center;}
.eval_list .item .e2{ margin: 0 auto 1rem; font-size: var(--fsM); line-height: 1.2; min-height: calc(var(--fsL)*2*1.2*1.2);} /* 以容器內字體最大為準乘以兩次行距1.2 */
.eval_list .item .e2 b{font-size: var(--fsXL); font-weight: 600; color: var(--pri01); margin: 0 5px; }
.eval_list .item .e2 b > span{font-size: var(--fsM);}
.eval_list .item .e3{ font-size: var(--fsP); min-height: calc(var(--fsP)*3*1.4 + 42px); /* 以容器內字體大小為準乘以3行再乘以行距1.8, + padding*2 + border*2 */ line-height: 1.4; padding: 20px; border: 1px solid var(--sec04); border-radius: 30px; background-color: #FFF;}
.eval_list .item .e3::after{ content: ''; position: absolute; width: 101px; height: 55px; bottom: -28px; right: 30px; background: url(../Images/product/TQGforecast/whosays.png) no-repeat top left; background-size: 100% auto;}

/* .eval_list .item .e3 span::before,
.eval_list .item .e3 span::after{ content: "“"; margin: 0 5px 0 -20px; font-size: var(--fsL); color: var(--sec02); font-weight: 900; font-family:'Noto Sans TC', sans-serif; line-height: 1;}
.eval_list .item .e3 span::after{ content: "”"; margin: 0 -20px 0 5px;} */

.eval_list .pager{ display: block; width: fit-content; margin: var(--pd) auto 0; text-align: center;}
.eval_list .pager a{ width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color:#D9D9D9; transition: .3s;}
.eval_list .pager a:hover,
.eval_list .pager a.focus{ background-color:var(--pri02n);}

/* 快速瀏覽 anchorbox from beverage */
a.anchor{width: 0;height: 0; position:relative; transform:translateY(-200px);} 
.s1 a.anchor,
.s2 a.anchor{transform:translateY(-150px);} 
/* .s2 a.anchor{width: 0;height: 0; position:relative; transform:translateY(-90px);}  */

/* htmleditor 不用a.anchor設定 直接用id=positionid */
.htmlEditor a[id][name] { position: relative; transform: translateY(-200px);}
.s1 .htmlEditor a[id][name],
.s2 .htmlEditor a[id][name] { transform: translateY(-150px);}

.anchorbox {font-size: 0;background-color: #FFF8E3; border-radius: 20px;  background-size: cover; background-image: url(../Images/bgCurve/anchorbox.svg); width: 100%;}
.anchorbox b.title{display: block; padding: 1.5rem 4rem; background-color: rgba(255, 255, 255, .9); border-radius: 0 0 25px 0; top: 0px; left:0; font-size: var(--fsM); width: fit-content; margin-bottom: 0;}
/* dl,dt,dd 包含兩層列表，ul,li 只有一層 */
.anchorbox dl, .anchorbox ul {display: inline-block;vertical-align: top; padding: 0 4rem; margin: 3rem 0; width:calc(100%/2); } 
.anchorbox dt, .anchorbox li{display: block;font-size: var(--fsM); font-weight: 500; margin-bottom: 2rem;}
.anchorbox dt a{font-weight: 500; color: #333; transition: .5s;}
.anchorbox dt a:hover{ color: #000;}
.anchorbox dd { display: block; margin-bottom: 1rem; font-size: var(--fsP);}
.anchorbox dd a, .anchorbox li a{ position: relative; padding-left: 2.5rem; color: #333; }
.anchorbox dd a:hover, .anchorbox li a:hover{ color: #000; }
.anchorbox li a{ padding-left: 3.5rem;}
.anchorbox dd a::before, 
.anchorbox li a::before{ display: inline-block; position: absolute; transition: .3s; }
.anchorbox dd a::before{ content: ''; width: 8px; height: 8px; background-color: var(--sec03); border-radius: 50%; top: calc(var(--fsP)/2); left: 7px;}
.anchorbox li a::before{ content: 'keyboard_arrow_right'; font-size: var(--fsL); font-weight: 900; color: var(--sec02); top: calc(var(--fsM)*1.5/2); transform: translateY(-50%); left: 0;}
.anchorbox dd a:hover::before{ background-color: var(--sec06); animation: anchorDotAni .3s ease-in-out;}
.anchorbox li a:hover::before{ color: var(--pri01); animation: anchorArrowAni .3s ease-in-out; }
.anchorbox dl:first-of-type, .anchorbox ul:first-of-type {border-right: 1px solid var(--com04); }
.anchorbox dl dd + dt { margin-top: 2rem; }
.anchorbox dl:nth-of-type(2) dt { margin-bottom: 2rem;}
/* 第三層 顯示羅馬數字 */
.anchorbox dd.sub { counter-reset: roman; margin-bottom: 1.5rem;}
.anchorbox dd.sub a{display: block ;margin-bottom: 1rem; padding-left: 3rem; font-size: var(--fsS);}
.anchorbox dd.sub a::before { counter-increment: roman; content: counter(roman, decimal) ")";  color: var(--sec04); margin-right: 0.5em; position: relative;left: 0; top: 0;background: none; width: auto;height: auto;}
.anchorbox dd.sub a:hover::before{ background-color:transparent;}

@keyframes anchorArrowAni{
	0% {transform: translate(0, -50%);}
	50%{transform: translate(-7px, -50%);}
	100% {transform: translate(0, -50%);}
}
@keyframes anchorDotAni{
	0% {transform: translateY(0);}
	50%{transform: translateY(-5px);}
	100% {transform: translateY(0);}
}


/* 快速瀏覽02 anchorbox02-橫式 from about */
.anchorbox02 { display: flex; align-items: center; position: relative; max-width: 100%; margin: 2rem 0; height: 60px; background: linear-gradient(90deg, #FA5699 0%, #AC4EEA 40%,#AC4EEA 60%, #0BCDE0 100%); border-radius: 999px; overflow: visible; }
.anchorbox02::before { display: none; }
.anchorbox02 .title { flex-shrink: 0; border: 1px solid #AC4EEA !important; border-radius:90px 0 0 90px; font-weight: 700; font-size: var(--fsM2); height: 60px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.6rem; white-space: nowrap;position: relative; z-index: 2; color: transparent !important; background-color: #fff !important; letter-spacing: 5px; text-indent: 5px; line-height: 1; }
.anchorbox02 .title::after { content: '快速瀏覽'; font-weight: 700; font-size: var(--fsM2); white-space: nowrap; z-index: 3; letter-spacing: 5px; text-indent: 5px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(90deg, #9A00FF 0%, #EA0060 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; line-height: 1; }
.anchorbox02 .scroll { border-radius: 20px; flex: 1; overflow-x: hidden; overflow-y: hidden; -webkit-overflow-scrolling: touch; height: 74px; margin-bottom: -14px; position: relative; z-index: 1;} /* scrollbar-width: thin; scrollbar-color: var(--com04) transparent;  */
.anchorbox02:hover .scroll { overflow-x: auto;}
.anchorbox02 .scroll::-webkit-scrollbar { height: 6px; }
.anchorbox02 .scroll::-webkit-scrollbar-button { display: none; }
.anchorbox02 .scroll::-webkit-scrollbar-track { background: transparent; border-radius: 99px; }
.anchorbox02 .scroll::-webkit-scrollbar-thumb { background: var(--com04); border-radius: 99px; }
.anchorbox02 .scroll::-webkit-scrollbar-thumb:hover { background: #555555; }
.anchorbox02 .list { display: flex; align-items: center; list-style: none;justify-content: space-between; margin: 0; padding: 0 0.5rem; white-space: nowrap; height: 60px; }
.anchorbox02 .list::after { content: ''; min-width: 20px; height: 1px; display: block;  }
.anchorbox02 .list li { display: inline-flex; align-items: center; height: 60px; padding: 0 0.5rem; }
.anchorbox02 .list li a { display: inline-flex; align-items: center; padding: 0 0 0 1.25rem; color: #fff; text-decoration: none; font-size: var(--fsP); transition: opacity .2s; height: 60px; }
.anchorbox02 .list li a:hover::after { opacity: 1 ; }
.anchorbox02 li a::after { content: 'keyboard_arrow_right'; opacity: 0.5; font-size: 1.4em; margin-left: 0.1rem; vertical-align: middle; transition: opacity 0.2s; }
.anchorbox02 .arrow-right { position: absolute;height: 60px; width: 70px; right: 0; top: 0;  color: #fff; font-size: var(--fsM); opacity: .9; display: inline-flex; align-items: center; justify-content: flex-end; padding-right: 1.5rem; z-index: 5; background: linear-gradient(90deg, rgba(74, 165, 228, 0.1) 0%, rgba(72, 160, 240, 0.9) 40%, #0660B2 100%); border-radius: 0 999px 999px 0; cursor: pointer; transition: opacity 0.2s, transform 0.2s; }
.anchorbox02 .arrow-right.off { opacity: 0; pointer-events: none; }
.anchorbox02 .arrow-right:hover { opacity: 1; transform: translateX(2px); }
.anchorbox02 .arrow-right::after { content: 'arrow_forward'; font-size: var(--fsL); vertical-align: middle; }
.anchorbox02 .arrow-left { position: absolute; left: 130px; top: 0; height: 60px; width: 80px; color: #fff; font-size: var(--fsM); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; justify-content: flex-start; padding-left: 1.5rem; z-index: 5; background: linear-gradient(270deg, rgba(234, 0, 96, 0) 0%, rgba(250, 86, 153, 0.9)50%, #FA5699  100%); cursor: pointer; transition: opacity 0.3s, transform 0.2s; }
.anchorbox02 .arrow-left.on { opacity: 0.9; pointer-events: auto; }
.anchorbox02 .arrow-left:hover { opacity: 1; transform: translateX(-2px); }
.anchorbox02 .arrow-left::after { content: 'arrow_back'; font-size: var(--fsL); vertical-align: middle; }


/* 共用 - 痛點 解方*/
.painSolution{ display: inline-block; width: 100%; font-size: 0;}
.painSolution .item{ filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3)); background-color: #fff;border:2px solid var(--sec02);border-radius: 20px;padding: 2rem;width: calc(100% / 3 - 20px);display:inline-block;vertical-align: top;margin: 1rem;}
.painSolution ul.list{ font-size: var(--fsP); border-bottom:1px solid var(--com03);margin-bottom: 2rem;padding-bottom: 2rem;display: block;}
.painSolution b{ display: flex; align-items: center; line-height: 1.5;width: fit-content; text-align: left;padding: 0.5rem 1.5rem; margin-bottom: 1rem; font-size: var(--fsP); font-weight: 700; background-color:#F7DDDD; color: var(--sec01);border-radius: 25px; }
.painSolution b::before{font-family: 'Material Icons Outlined';font-size: var(--fsM); margin-right: 0.5rem;}

.painSolution ul.list li.title{ color:var(--com02); font-size: var(--fsM); font-weight: 700; position: relative; padding-bottom: 0px;display: block;margin-bottom: 0.5rem;}
.painSolution ul.list li{ padding: 0px;color:var(--com02); }
.painSolution ul.list:nth-child(1) li:last-child,
.painSolution ul.list:nth-child(2) li:last-child{height:calc(var(--fsP)*2*1.5);}

.painSolution ul.list:nth-child(2) b,
.painSolution ul.list:nth-child(2) li.title{ color:#B14C8C;}
.painSolution ul.list:nth-child(2) li{ color:#000;}
.painSolution ul.list:last-child{ border-bottom: 0px;padding-bottom:0; margin-bottom: 0;}



/* 全球營運地圖 mapbox from Contact */
.mapbox .loc,
.mapbox .txt,
.mapbox .info,
.mapbox .map{width: 100%; height: 780px; display: block; position: absolute;}
.mapbox .loc{z-index: 3;}
.mapbox .loc a{ font-size: var(--fsM2); font-weight: 600; color: #666; white-space: nowrap; position: absolute; top: 50%; left: 50%; opacity: 0; transition: .5s;}
.mapbox .loc a span{ display: inline-block; vertical-align: middle;}
.mapbox .loc a.R::before,
.mapbox .loc a.L::after,
.mapbox .info ul .i1::before{ content: ''; width: 55px; height: 66px; background-image: url(../Images/Contact/map_loc.png); background-size: contain; background-repeat: no-repeat; vertical-align: middle;}
.mainContent.t1 .mapbox .loc a,
.mapbox.t1 .loc a{ opacity: 1;}

.mapbox .loc a.m1{ margin-top: -225px; margin-left: -129px; transition-delay: .0s;}
.mapbox .loc a.m2{ margin-top: -138px; margin-left: -262px; transition-delay: .6s;}
.mapbox .loc a.m3{ margin-top: -95px; margin-left: -297px; transition-delay: .3s;}
.mapbox .loc a.m4{ margin-top: -34px; margin-left: -311px; transition-delay: .9s;}
.mapbox .loc a.m5{ margin-top: -46px; margin-left: -463px; transition-delay: .0s;}
.mapbox .loc a.m6{ margin-top: 48px; margin-left: -527px; transition-delay: .2s;}
.mapbox .loc a.m7{ margin-top: 140px; margin-left: -522px; transition-delay: .8s;}
.mapbox .loc a.m8{ margin-top: 190px; margin-left: -485px; transition-delay: .5s;}
.mapbox .loc a.m9{ margin-top: -170px; margin-left: 195px; transition-delay: .9s;}

.mapbox .info{z-index: 4; left: 50%; transform: translateX(-50%); pointer-events: none;}
.mapbox .info ul{ position: absolute; /*top: 55%; right: var(--pd2);*/ font-size: var(--fsP); display: inline-block; opacity: 0; background-color: rgba(255,255,255,.7); box-shadow: 0 0 5px #999; border-radius: 10px; padding: 20px; min-width: 300px; max-width: 50%; transition: .3s;}
.mapbox .info ul{top: 50%; left: 42%;}
.mapbox .info ul.on{opacity: 1; pointer-events: auto;}
.mapbox .info ul li{ display: block; width: 100%;}
.mapbox .info ul li::before{ margin-right: 5px;}
.mapbox .info ul .i1{ font-size: var(--fsM); font-weight: 600;}
.mapbox .info ul .i1::before{ width: 40px; height: 50px;}
.mapbox .info ul .i2{ border-top: 1px solid #DEDEDE; padding: 10px; padding-bottom: 0;}
.mapbox .info ul .i2::before{ content: 'mail';}
.mapbox .info ul .i3{ padding: 0 10px 10px;}
.mapbox .info ul .i3::before{ content: 'call';}

.mapbox .txt{ z-index: 2; position: absolute;}
.mapbox .txt .wd{ display: inline-block; font-size: var(--fsXL); position: absolute; bottom: var(--pd2); left: 50%;}
.mapbox .txt .wd dt,
.mapbox .txt .wd dd{ display: block; text-align: right;}
.mapbox .txt .wd dt{ font-weight: 900;}
.mapbox .txt .wd dd b{ color: var(--sec02);}

.mapbox .map{ transform: translate(-16px, -8px); z-index: 1; position: relative; background-image: url(../Images/product/map_clean.png); background-position: center; background-size: auto 100%; background-repeat: no-repeat;}

.contactBlock .mapbox .loc,
.contactBlock .mapbox .txt,
.contactBlock .mapbox .info,
.contactBlock .mapbox .map{height: 1285px;}
.contactBlock .mapbox .map{ transform: none; background-image: url(../Images/Contact/map.jpg);}


/* 全球營運版圖 serviceMap from TQG */
.serviceMap{width: 100%; position: relative; background-image: url(../Images/product/map.png); background-size: contain;}
.serviceMap::after{content: ""; display: block; padding-top: 63.175%;}
.serviceMap .txt{ display: inline-block; font-size: var(--fsXL); position: absolute; bottom: var(--pd2); left: 50%;}
.serviceMap .txt dt,
.serviceMap .txt dd{ display: block; text-align: right;}
.serviceMap .txt dt{ font-weight: 900;}
.serviceMap .txt dd b{ color: var(--sec02);}



/*======================================================================*/
/*======================================================================*/
/*======================================================================*/
/*======================================================================*/
/* ============== header ============== */
header {width:100%; position:relative; z-index: 12;}
header .mheader{ display: none;}
header a{ color: #000; cursor: pointer;}
header a.logo{width:8rem; background-image:url(../images/logoR.svg) ;background-position:center; background-repeat:no-repeat; background-size:contain; vertical-align: middle;}
header a.logo::after{ content: ''; display: block; padding-top: 53.285%;}	
header a span{ display: inline-block; vertical-align: middle;}
header .UI::before{ font-size: var(--fsP); vertical-align: middle;}

.navBody .main{ display: block; width: 100%; background-color: #FFF; position: relative; z-index: 3;}
.navBody .main .container{ display: flex; align-items: center; justify-content: flex-start; position: relative;}
.navBody .main .left{ font-size: 0;}
.navBody .main .right{ position: absolute; right: var(--pd); top: 50%; transform: translateY(-50%);}
.navBody .main .right .search span{ display: none;}
.navBody .main a{ font-size: var(--fsS); font-weight: 500; color: #595959; line-height: 1; margin-right: 5rem; padding: 1.5rem 0; transition: .3s;}
.navBody .main a:hover,
.navBody .main a.on{ color: #000; }
.navBody .main .right a{ margin: 0 0 0 3rem;}

.navBody .sec{ display: block; width: 100%; position: absolute; z-index: 2;}
.navBody .sec .container{}
.navBody .sec dl{ display: block; font-size: 0; width: 100%; padding: 2rem 0 5rem var(--pd); height: auto; position: absolute; z-index: 5; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .3s;}
.navBody .sec dl.m2,
.navBody .sec dl.ms{ padding-left: calc(var(--pd) + 8rem + 5rem);}
.navBody .sec dl.on{ pointer-events: auto; opacity: 1; }
.navBody .sec dt,
.navBody .sec dd{ display: inline-block; vertical-align: top; margin-right: 10rem; font-size: var(--fsP);}
.navBody .sec dt{ width: 300px; height: calc(var(--fsP)*4*1.5 + 4rem); margin: .5rem 5rem 0 0; border-radius: 2rem; background-size: cover; background-position: left; position: relative; opacity: 0; transition: .2s;}
.navBody .sec dt::after{ content: ''; display: inline-block; width: 100%; height: 100%; background: linear-gradient(to right, transparent 50%, white 99%); position: absolute; top: 0; left: 0;}
.navBody .sec dl.on dt{ opacity: 1;}
.navBody .sec .m3 dt::after,
.navBody .sec .m4 dt::after{ display: none;}
.navBody .sec .m3 dt{ background-image: url(../Images/header/p3-1.jpg?v=20250918);}
.navBody .sec .m4 dt{ background-image: url(../Images/header/p4-1.jpg?v=20250918);}
.navBody .sec .m5 dt{ background-image: url(../Images/header/p5-1.jpg?v=20250918);}
.navBody .sec .m6 dt{ background-image: url(../Images/header/p6-1.jpg?v=20250918);}
/* .navBody .sec .m7 dt{ background-image: url(../Images/header/p7-1.jpg);} */


.navBody .sec dd a{ display: block; color: #595959; font-weight: 400; padding: .5rem 0; transition: .3s;}
.navBody .sec dd a.sub{ font-weight: 600; color: #000;}
.navBody .sec dd a:not([href]){pointer-events: none; }
.navBody .sec dd a:hover{ color: var(--pri01)!important;}
.navBody .sec .ms dd{ margin-right: 0; width: 70%; min-width: 400px; }
.navBody .sec .ms dd a{ display: inline-block; vertical-align: middle; line-height: 1;}
.navBody .sec .ms dd a span{ display: none;}
.navBody .sec .ms dd a::before{ font-size: var(--fsM);}
.navBody .sec .ms dd input{ border: none; border-radius: 0; font-size: var(--fsM); width: calc(100% - 50px);}

.navBody .secbg{display: block; position: absolute; top: calc(0px - var(--navH)); left: 0; z-index: 1; width: 100%; height: 0; background-color: #FFF; transition: height .4s;}

.navBody .bg{display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 0; background-color: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: height .6s;}
.navBody .sec.on + .bg{ height: 100vh;}

/* 首頁主選單樣式調整 */
/* .index header{ margin-top: var(--pdh); position: absolute; z-index: 20;}
.index .navBody .main{ background-color: transparent; transition: .4s; }
.index .navBody .main .right{ /有EN, right: 0;/ right: var(--pd); }
.index .navBody .main .right a{ margin-left: 2rem;}
.index .navBody .main a{ color: #000; padding: 1rem 0;}
.index .navBody .main a:hover,
.index .navBody .main a.on{ color: var(--pri01); }
.index .navBody .secbg{ background-color: rgba(255,255,255,.8);} */

/* ============== 頁面滾動 header action ============== */
.s1 header,
.s2 header{position:fixed; top:0; z-index:99; background-color: #FFF; box-shadow: 0px 2px 4px rgba(0,0,0,.15); }
/* .s1.index header,
.s2.index header{margin-top:0;} */
.s1 .navBody .main a,
.s2 .navBody .main a{ padding: 1rem 0;}

/* goTop */
a.goTop{opacity:0; position:fixed; bottom:30px; right:30px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background-color:var(--pri01); border-radius:99px; color:#FFF; transition: .3s; font-size: 30px; z-index: 99;}
.s2 a.goTop{opacity:1;}
.s2 a.goTop:hover{background-color:var(--pri02);}

/* ============== footer ============== */
footer{ /*border-top: 1px solid #EEE;*/ position: relative; z-index: 10;}
footer .contactUs{}
footer .contactBox{width:100%; position:relative; background-image:url(../Images/moreBanner5.jpg); background-position:center; background-repeat:no-repeat; background-size:auto 100%;}
footer .contactBox .container{ height: 280px;}
footer .contactBox a.container{ display: block!important;}
footer .contactBox .word{font-size:var(--fsL); font-weight:600; max-width:575px; position:absolute; left:calc(var(--pd)*3); top: 37%; /*transform: translateY(-50%);*/}
footer .contactBox b{margin-right:5px;}
footer .contactBox a{}

footer .ribbons{ background-color:var(--pri01); padding:15px 0;}
footer .ribbons .box{margin:0 auto; display:flex; justify-content:space-between;}
footer .ribbons .R,
footer .ribbons .L{display:flex; align-items: center; color:#FFF; font-size:var(--fsM);}
footer .ribbons .L img{ margin-right: 10px;}

footer .footerMenu{background-color:#F1F1F1;}
footer .footerMenu .list{width: 100%; margin:0 auto; padding:var(--pd) 0; font-size: 0;}
footer .footerMenu ul{display:inline-block; vertical-align: top; width: calc(100%/5); font-size: var(--fsS); color: #000000; margin-top: 15px;}
footer .footerMenu li{width: 100%; margin-top:10px;}
footer .footerMenu li:first-child{margin-top:0;}
footer .footerMenu dl{width: 100%;margin-bottom: 2rem;}
footer .footerMenu dl + dl{margin-top: 2rem; }
footer .footerMenu dl dt a {margin: 0;}
footer .footerMenu dt{width: 100%; font-size: var(--fsS); font-weight:700; margin: 0 0 10px 0;}
footer .footerMenu dt a{ font-weight: 700; color:#000;}
footer .footerMenu dd{width: 100%; font-weight:400; }
footer .footerMenu dt.sub,
footer .footerMenu a.sub{display: block;color:#3A3A3A;margin: 0 0 5px 0;}
footer .footerMenu a{display: block;color:#595959; transition: .5s; margin:0 0 5px 0 ; font-weight: 400; }
footer .footerMenu a.hashtag{padding-left: 0.6rem; margin-bottom: 0; color: #8d8d8d;}
footer .footerMenu a:hover{color:var(--pri01);}
footer .footerMenu a.page + a.sub{margin-top: 2rem;}

footer .statement{background-color:#000; color:#FFF;}
footer .statement .box{margin:0 auto; display:flex; justify-content:space-between; padding:10px 0; width: 100%; font-size:var(--fsXS); /*font-weight:300;*/}
footer .statement a, footer .statement span{ display: inline-block; vertical-align: middle;}
footer .statement a{color:#FFF; margin: 0 3px; transition: .3s;}
footer .statement a:hover{ color: var(--pri01);}
footer .statement a.UI{text-decoration: none;}
footer .statement a span{ margin-left: 3px;}
footer .statement b{color:#FFF;}
footer .statement .UI{ display: inline-block;}

/* ============== 首頁 index ============== */
/* .index .mainContent{ padding-top: var(--pdh);} */
.index .mainContent .container.c1{margin-top: -55px; pointer-events: none;}
.index .mainContent .container.c1 block{padding: 0; z-index: 2;}

.index block{ display: block; position: relative; padding: 50px 0;}
.index block h5.title{ text-align: left; }
.index .c1 block h5.title{ margin-bottom: 0;}

.index block.KV{ width: 100%; max-width: var(--maxW); margin: 0 auto;}
block.KV{ display: block; position: relative; padding: 0!important; border-radius: 30px 30px 30px 0; overflow: hidden; z-index: 1;}
block.KV::before,
block.KV::after{ content: ''; display: inline-block; position: absolute;  background-repeat: no-repeat; z-index: 9; }
/* block.KV::before{top: 0; right:-1px; width: 246px; height: 77px; background-image: url(../Images/index/kv_coner-01.svg); background-position: top right;} */
block.KV::after{bottom: -1px; left: 0; width: 605px; height: 136px; background-image: url(../Images/index/kv_coner-02.svg); }
block.KV ul.KV-img{ position: relative; width: 100%; max-width: 1600px; display: block; margin: 0 auto;}
block.KV ul.KV-img::after{ content: ''; display: block; padding-top: 52.21%;}
block.KV ul.KV-img li{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}
block.KV ul.KV-img li a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;}
block.KV .pager{position: absolute; width: 50%; bottom: 15px; right: 30px; text-align: right; z-index: 20;}
block.KV .pager a{ font-size: 0; background-color: #FFF; width: 10px; height: 10px; margin: 0 5px; padding: 0; border-radius: 10px; display: inline-block; transition: .3s;}
block.KV .pager a.focus,
block.KV .pager a:hover{ background-color: var(--pri02);}
block.KV a.page{ color: #FFF; font-size: 50px; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; transition: .3s; position: absolute; top: 50%; left: 20px; z-index: 19; border-radius: 50%;}
block.KV a.page.next{ left: auto; right: 20px;}
block.KV a.page:hover{background-color: var(--pri02);}

block.solution{}
.solution-list{ display: inline-block; width: 100%; font-size: 0; }
.solution-list .part{ display: inline-block; width: calc((100% - var(--pd)*2)/3); margin-right: var(--pd); margin-bottom: var(--pd); font-size: 20px; position: relative; overflow: hidden; border-radius: 25px;}
.solution-list .part::after{ content: ''; display: block; padding-top: 68.421%;}
.solution-list .part:nth-of-type(3n){ margin-right: 0;}
.solution-list .part h6{ display: inline-block; font-size: var(--fsM); font-weight: 700; padding: 8px 20px; border-radius: 40px; background-color: rgba(255,255,255,.7); position: absolute; top: 10px; left: 10px; z-index: 9;}
.solution-list .part .control{ position: absolute; bottom: 10px; right: 10px; display: inline-block;}
.solution-list .part .control a{ color: #FFF;}
.solution-list .part .control a.UI:hover{ color: var(--pri01);}
.solution-list .part .control .pager{ display: inline-block;}
.solution-list .part .control .pager a{ width: 10px; height: 10px; background-color: rgba(255,255,255,.5); display: inline-block; border-radius: 50%; margin: 0 3px;}
.solution-list .part .control .pager a:hover,
.solution-list .part .control .pager a.focus{ background-color: #FFF;}

.index .so-img{ position: absolute!important; width: 100%; height: 100%;z-index:0;}
.index .so-img li{ width: 100%; background-size: cover; position: relative;z-index:0;}
.index .so-img li.selected{ z-index:3;}
.index .so-img li::after{ content: ''; display: block; padding-top: 68.421%;}
.index .so-img li p,
.index .so-img li a{ position: absolute;}
.index .so-img li a{ width: 100%; height: 100%;}
.index .so-img li p{padding: 8px 20px; border-radius: 20px; background-color: rgba(255,255,255,.7); bottom: 40px; left: 10px; max-width:calc(100% - 20px); font-size:var(--fsP); font-weight:300;}
.index .so-img li p b{display:block; font-size:var(--fsP); font-weight:400;}
.index .so-img li p span{ display: inline-block; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis; font-weight:300; font-size:var(--fsS);}

block.applictaion{ display: flex; align-items: center; justify-content: space-between;}
block.applictaion h5.title{ display: inline-block; color: #FFF;}
block.applictaion h5.title::after{ content: ''; width: 813px; height: 444px; background-image: url("../Images/inPageBgG2.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; top: 0; right: 0; transform: translate(30%, -150px); z-index: -1;}

block.applictaion a{ width: 280px; background-size: 100%; transition: .3s; border-radius: 30px; overflow: hidden; position: relative; background-position: center; margin: 20px;}
block.applictaion a::after{ content: ''; display: block; padding-top: 100%;}
block.applictaion a:hover{ background-size: 110%;}
block.applictaion a.a1{ background-image: url('../Images/index/app-1.jpg'); color: #FFF;}
block.applictaion a.a2{ background-image: url('../Images/index/app-2.jpg'); color: #192E3A; }
block.applictaion a.a3{ background-image: url('../Images/index/app-3.jpg'); color: #C98F00; margin-left: 120px;}
block.applictaion a.a4{ background-image: url('../Images/index/app-4.jpg'); color: #FFF; margin-right: 0;}
block.applictaion a span{ position: absolute; font-size: var(--fsL); font-weight: 700; line-height: 1.1; top: 20px; left: 20px;}

block.case::after{ content: ''; width: 1400px; height: 740px; background-image: url('../Images/inPageBgG3.svg'); background-size:contain; background-repeat: no-repeat; background-position: center; position: absolute; top: -25%; right: -140px; z-index: -1;}
block.case h5.title{ text-align: right; color: #FFF; }
block.case h5.title a{ color: #FFF;}
block.case h5.title a span{ display: inline-block; vertical-align: middle; margin-left: 10px;}
block.case h5.title a::before{ background-color: #FFF; color: #333; border-radius: 50%; vertical-align: middle; font-size: 40px; padding: 5px; transition: .3s; }
block.case h5.title a:hover::before{ transform: rotate(90deg);}

block.case .case-list{ display: inline-block; width: 100%; white-space: nowrap; text-align: center;}
block.case .case-list a.UI{ font-size: 50px; color: #FFF;}
block.case .case-list a.UI:hover{ color: var(--pri01);}
block.case .case-list a.UI,
block.case .case-list .listBox{ display: inline-block; vertical-align: middle;}
block.case .listBox { width: 60%; overflow: hidden; font-size: 0;}
block.case .listBox li{ width: calc(100%/4 - 10px); margin: 5px; background-color: #FFF; border-radius: 50%; background-size: 150%; background-position: center; background-repeat: no-repeat;}
block.case .listBox li::after{ content: ''; display: block; padding-top: 100%;}

block.news{ font-size: 0; margin-top: 100px;}
block.news h5.title{ display: inline-block; color: #FFF; margin-bottom: 80px;}
block.news h5.title a{ color: #FFF;}
block.news h5.title a span{ display: inline-block; vertical-align: middle; margin-right: 10px;}
block.news h5.title a::after{ content: 'add'; background-color: #FFF; color: #333; border-radius: 50%; vertical-align: middle; font-size: 40px; padding: 5px; transition: .3s; }
block.news h5.title a:hover::after{ transform: rotate(90deg);}
block.news h5.title::after{content: ''; width: 766px; height: 250px; background-image: url(../Images/index/title_bg.svg); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; top: -36px; right: -210px; z-index: -1;}

block.news .listBox{ display: inline-block; width: 50%; vertical-align: middle;}
block.news .listBox .item{width:100%; position: relative; margin-bottom: var(--pdh);}
block.news .listBox .item dl{ width: 100%;}
block.news .listBox .item dt{-webkit-mask: url(../Images/news_pic_mask.svg) no-repeat; mask: url(../Images/news_pic_mask.svg) no-repeat;}
block.news .listBox .item dt img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: .3s;}
block.news .listBox .item dt{width:170px; height: 116px; position:relative; vertical-align: middle;}
block.news .listBox .item dt::after{ content: ''; display: block; padding-top: 67.885%;}
block.news .listBox .item::before{ content: ''; display: block; width: 170px; height: 116px; position: absolute; top: 0; left: 0; background-image: url(../Images/news_pic_arrow.svg); transition: .3s; background-repeat: no-repeat; pointer-events: none;}
block.news .listBox .item:hover::before{ background-image: url(../Images/news_pic_arrow_hover.svg);}
block.news .listBox .item:hover dt img{ transform: scale(1.05);}

block.news .listBox .group{ width: calc(100% - 170px - 20px); display: inline-block; margin-left: 20px; vertical-align: middle;}
block.news .listBox dd.n1{font-size:16px; background-color: var(--pri06); color: #FFF; padding: 5px 20px 5px 10px; border-radius: 0 20px 20px 0;}
block.news .listBox dd.n2{font-size:var(--fsP); color: #000; margin:0 0 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; overflow: hidden; text-overflow: ellipsis;}
block.news .listBox dd.n3{font-size:var(--fsS); font-weight:normal; color:#888; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; }

block.news .listBox.hot .item{ width: 80%;}
block.news .listBox.hot .item dt{width: 100%; height: auto; margin-bottom: 10px;}
block.news .listBox.hot .item::before{width: 100%; height: 100%;}

/* thankyou */
.thankyou.mainContent{ display: flex; align-items: center;}
.thankyou block{ display: flex; justify-content: center; align-items: center; position: relative; padding: 50px 0; }
.thankyou block .group{padding: var(--pd);}
.thankyou block img{ width: 300px;}
.thankyou block p{font-size: var(--fsM); font-weight: 700; margin-bottom:var(--pd);}

/* ============== 媒體與活動 events ============== */
/* 共用 */
.events .listBox{width: 100%; margin:0 auto; display:inline-block; font-size: 0;}
.events .listBox a{width:calc((100% - var(--pdh)*2)/3); display: inline-block; margin:0 var(--pdh) var(--pd) 0; border-radius:25px; background-color:#FFF; overflow:hidden; box-shadow: 2px 5px 24px 2px #DEDEDE; transition: .3s; vertical-align: top;}
.events .listBox a:hover{box-shadow: 2px 5px 24px 2px #BBB;}
.events .listBox a:nth-of-type(3n+3){ margin-right: 0;}
.events .listBox dl{width:100%;}
.events .listBox dt{width:100%; background-repeat:no-repeat; background-position:center; border-radius:25px 25px 0 0; background-size:cover;}
.events .listBox dt::after{ content: ''; display: block; padding-top: 60%;}
.events .listBox dd{width: 100%;}
.events .listBox span{width:100%; margin:0 auto; display:block; color:#333; font-size:var(--fsP); font-weight: 700; padding:10px;}
.events .listBox date{display:block; font-size:16px; font-weight: normal; color: #000;}

.events .hotnews{width:100%; display: flex; justify-content: center; align-items: center; margin: 0 auto var(--pd);}
.events .hotnews .pic{width:100%; max-width:640px; background-color: #000; border-radius: 25px; position: relative; box-shadow: 2px 5px 24px 2px #DEDEDE; }
.events .hotnews .pic span{width:100%; height:100%; background-image: url(../Images/default_photo.jpg); background-position:center; background-repeat:no-repeat; background-size:cover; display:block; position:absolute; z-index:1; border-radius:22px;}
.events .hotnews .pic::after{content:""; padding-top: 58%; display: block;}
.events .hotnews .pic::before{content:""; width:100%; height:100%; background-image:var(--gradient08); position:absolute; bottom:-10px; right:-10px; border-radius:25px; box-shadow: 2px 5px 24px 2px #DEDEDE;}
.events .hotnews dd{min-width:calc(40% - 50px); padding:0 50px;}
.events .hotnews b{font-size:30px; display:block;}
.events .hotnews dd span{display:block; margin:10px auto;}

.events .tagBox{max-width:1000px; margin:0 auto; text-align:center; margin:0 auto 25px auto;}
.events .tagBox a{font-size:var(--fsS); border-radius: 99px; border: solid 2px var(--pri04); padding: 3px 15px; margin: 0 10px 10px 10px;}
.events .tagBox a:hover,
.events .tagBox select:hover,
.events .tagBox a.focus{background-color:var(--pri04); color:#FFF;}
.events .tagBox select{border-radius:99px; border:solid 2px var(--pri04);}

/* 共用內頁-上方圖片 */
.inPage .mainTop{ display: block; width: 100%; padding: var(--pd) 0; position: relative; }
.inPage .mainTop::after{ content: ''; width: 100%; height: 100%; border-radius: 25px; background: var(--gradient15); position: absolute; top: 0; left: -40%; z-index: 1;}
.inPage .mainTop .main{width:100%; padding: 0 var(--pd); display:flex; align-items:center; justify-content:space-between; position: relative; z-index: 2;}

.inPage .mainTop dl{width:49%;}
.inPage .mainTop dt{font-size:100px; font-weight:100;}
.inPage .mainTop dd{}
.inPage .mainTop dd b{display:block; font-size:var(--fsL);}
.inPage .mainTop dd span{display:block; font-size: var(--fsS);}

.inPage .mainTop .pic{width:46%; position:relative; min-width:500px;}
.inPage .mainTop .pic span{width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; display:block; position:absolute; z-index:1; border-radius:22px;}
.inPage .mainTop .pic::after{content:""; padding-top: 58%; display: block;}
.inPage .mainTop .pic::before{content:""; width:100%; height:100%; background-image:var(--gradient08); position:absolute; bottom:-10px; right:-10px; border-radius:25px;}

.inPage .mainTop .social-link{margin-top:30px; padding-right: var(--pd); text-align:right; position: relative; z-index: 3;}

/* 共用內頁-下方表格跟html編輯器 */
.inPage .eventsIn{margin:var(--pd) auto;}


/* ============== 白皮書 paper ============== */
.bodybox.paper{}
.paper .inPagekv{background-image:url(../Images/Events/paper-banner.jpg);}
.paper .paperBox{max-width:1200px; margin:0 auto;}

/* 內頁 */
.eventsPaper .leftGrid{width:48%; max-width:495px; padding:20px; border:solid 1px #000; border-radius:25px; position:relative;}
.eventsPaper h4{font-size:30px; margin-bottom:20px;}
.eventsIn.eventsPaper{display:flex; justify-content:space-between;}
.eventsPaper .wordL{width:48%; position:relative;}
.eventsPaper .htmlEditor{width:100%;}

/* ============== 成功案例 case ============== */
.case .mainContent{background:var(--gradient01B);}

.caseBox{max-width:100%; margin:0 auto; padding-bottom:100px;}
.case .inPagekv{background-image: url(../Images/Events/case-banner.jpg); background-position:center;}

.case .title{margin-bottom:25px; width: 100%; text-align: center;}
.case .title dd{font-size:var(--fsL);}
.case .title dd b{background-image:var(--gradient11); background-clip:text; color:transparent; font-size:var(--fsXL); margin: 0 8px;}

.case .caseLogoList{ white-space: normal; text-align: left;}
.case .caseLogoList .listBox{ width: 100%;}
.case .caseLogoList .listBox li{max-width:310px;  /*width:calc((100%/4) - 20px);*/ margin:0 10px 100px 10px; vertical-align: top;}
.case .caseLogoList .listBox span{font-size:var(--fsS); display:block; text-align:center; position:absolute; bottom:-52px;}

/*
.caseBox .listBox{display:flex; flex-wrap:wrap; flex-direction:row;}
.caseBox .listBox li{}
.caseBox .listBox b{display:block; width:100%; background-position:center; background-repeat:no-repeat; background-color:#FFF; background-size:contain; border-radius:25px; position:relative; border:solid 1px #eaeaea; transition:1s;}
.caseBox .listBox b::after{ content: ''; display: block; padding-top: 100%;}
.caseBox .listBox li:hover b{ filter: grayscale(0%);}
*/


/* ============== 部落格 blog ============== */
.blog{}
.blog .inPagekv{background-image:url(../Images/Events/blog-banner.jpg); background-position:center;}
.blog h3{max-width:1200px; margin:50px auto 0 auto; text-align:left;}
/*.blog .list{margin-top:10px;}*/

/* 內頁 */
.blogPag{}
.blogPag .tag{margin:50px auto 20px auto; border-bottom:1px solid #d9dae1; padding-bottom:20px;}
.blogPag .tag .UI::before{font-size:var(--fsS);}
.blogPag .tag span{margin-right:20px;}
.blogPag .tag a{font-size:16px; padding: 3px 10px; font-weight: 300; letter-spacing:0; background-color:var(--pri04); margin-bottom: 5px;}
.blogPag .tag a:hover{background-color:var(--pri02);}

/*.eventsBlog{margin:0 auto 100px auto;}*/
.blogPag .htmlEditor{ margin-bottom: 100px;}
/*
.eventsBlog .htmlEditor h4{font-size:30px; margin-top:20px;}
.eventsBlog .htmlEditor p{line-height:30px; font-size: var(--fsS); color: #242424; font-weight:300;}
*/

/* ============== 活動 activity ============== */
.activity{}
.activity h3{ margin:0 auto var(--pdq); font-size:var(--fsM);}
.activity .inPagekv{background-image:url(../Images/Events/activity-banner.jpg); background-position:center;}
.events.activity .first{justify-content:space-between;}
.events.activity .first dd { min-width: 46%; padding: 0 0px 0 50px;}

/*.activityBox{ padding: 0 var(--pd);}*/
.activity .listBox{}
.activity .date{font-size:var(--fsS);}

/* 內頁 */
.eventsIn{display:flex; justify-content:space-between; padding: 0 var(--pd);}
.eventsIn .wordL{width:calc(100% - 600px - var(--pd)); position:relative;}
.eventsIn .wordL h4{ font-size: var(--fsP); font-weight: 700; margin-bottom: var(--pdh);}
.eventsIn .tableBox{ width:600px; position:relative; max-height:1040px;}
.eventsIn .btnbox a{background-image:var(--gradient08);}


/* ============== 內頁共用 ============== */
.eventsPaper .leftGrid label span:hover{color:var(--pri01);}

.events.inPage{}
.events.inPage .mainTop{}

.inPage .mainTop .social-link a.in{background-image:url(../Images/ui/footerIcon01-02.svg);}
.inPage .mainTop .social-link a.yt{background-image:url(../Images/ui/footerIcon02-02.svg);}
.inPage .mainTop .social-link a.line{background-image:url(../Images/ui/footerIcon03-02.svg);}
.inPage .mainTop .social-link a.fb{background-image:url(../Images/ui/footerIcon04-02.svg);}

/* ================================== */
/* ============== 產品 ============== */

.bodybox.kiosk .inPagekv{background-image:url(../Images/product/kiosk/banner.jpg);}
.bodybox.online .inPagekv{background-image:url(../Images/product/online/banner.jpg);}
.bodybox.pos .inPagekv{background-image:url(../Images/product/pos/case-banner1.jpg);}
.bodybox.mPOS .inPagekv{background-image:url(../Images/product/mpos/case-banner1.jpg);}
.bodybox.kds .inPagekv{background-image:url(../Images/product/kds/case-banner1.jpg);}
.bodybox.waiting .inPagekv{background-image:url(../Images/product/waiting/case-banner1.jpg);}

.bodybox.mStore .inPagekv{background-image:url(../Images/product/mstore/case-banner1.jpg);}
.bodybox.einvoice .inPagekv{background-image:url(../Images/product/einvoice/banner.jpg);}
.bodybox.billboard .inPagekv{background-image:url(../Images/product/billboard/case-banner1.jpg);}

.bodybox.laas .inPagekv{background-image:url(../Images/product/saas/case-banner1.jpg);}
.bodybox.wise .inPagekv{background-image:url(../Images/product/WISE/case-banner1.jpg);}
.bodybox.interaction .inPagekv{}
.bodybox.multilingual .inPagekv{background-image:url(../Images/product/multilingual/case-banner1.jpg);}
.bodybox.voice .inPagekv{background-image:url(../Images/product/voice/case-banner1.jpg);}


/* ============== KDS廚房系統 kds ============== */
/* 共用頁籤切換樣式 */
.block .tab-obj,
.block .tab-img{ width: 100%; font-size: var(--fsP); text-align: center; display: inline-block;}
.block .tab-obj .lv2 li,
.block .tab-img li{ display: none;} 
.block .tab-obj .lv2 li.on,
.block .tab-img li.on{ display: inline-block;}
.block .tab-obj a{ padding: 5px; position: relative;}
.block .tab-obj .lv1 a{font-weight: 700;}
.block .tab-obj .lv1 a:hover,
.block .tab-obj .lv1 a.focus{ 
	border-bottom: 3px solid transparent; border-image: var(--gradient11); border-image-slice: 1;
	-webkit-background-clip: text; -webkit-text-fill-color: transparent!important; -webkit-box-decoration-break: clone; background-image: var(--gradient11);}
.block .tab-obj .lv2{ border-top: 1px solid #000; margin-bottom: 20px;}
.block .tab-obj .lv2 a{font-size: var(--fsS); padding-top: 10px;}
.block .tab-obj .lv2 a:hover,
.block .tab-obj .lv2 a.focus{ color: var(--pri02);}
.block .tab-obj .lv2 a.focus::before{ content: ''; width: 0; height: 0;
border-style: solid; border-width: 10px 5px 0 5px; border-color: var(--pri02) transparent transparent transparent; position: absolute; top: 0; left: 50%;}
.block .tab-img p.txt{ margin-bottom: 10px; line-height: 1.2;}
/* 共用頁籤切換樣式end */

.kds .block::after{ transition: .2s;}
.kds .block.b2::after{content: ''; width: 100%; height: 100%; position: absolute; top: -20%; left: 0; z-index: -1; background-image: url(../Images/inPageBgG5.svg); background-size: 100% auto; background-repeat: no-repeat;}
.kds .block.b4::after{content: ''; width: 100%; height: 200%; position: absolute; top: -800px; left: 0; z-index: -1; background-image: url(../Images/inPageBgG11.svg); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
.kds .block.b5{ background-image: url(../Images/product/KDS/b5-bg.jpg); background-size: cover; background-position: bottom; color: #FFF; font-size: 0; padding: calc(var(--pd2)*2) 0 calc(var(--pd2)*3);}
.kds .block.b5::after{content: ''; width: 100%; height: 400%; position: absolute; top: 55%; left: 0; z-index: 0; background-image: url(../Images/inPageBgG5.svg); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
.kds .b5 .container-belt > img,
.kds .b5 .group{ width: 65%; max-width: 835px; display: inline-block; vertical-align: middle; position: relative; z-index: 3;}
.kds .b5 .group{ width: 35%; text-align:center; padding-left: 15px; }
.kds .block.b6{ z-index: 2;}
.kds .b6 .tab-obj .lv1{ border-bottom: 1px solid #000; margin-bottom: 30px;}
.kds .b6 .tab-img p.txt{ margin-bottom: var(--pd2);}
.kds .b6 .tab-obj .lv1 a.focus::after{content: ''; width: 0; height: 0;
border-style: solid; border-width: 10px 5px 0 5px; border-color: var(--pri04) transparent transparent transparent; position: absolute; bottom: -14px; left: 50%;}


/* 共用 統計數據（多數在banner底下） */
.stats { position: relative; width: 100%; padding: 5rem 2rem;}
.stats .bg { position: absolute;inset: 0; z-index: 0; background:linear-gradient(180deg, #FFFFFF 0%, #ffffff00 40%), linear-gradient(90deg, var(--sec02) 0%, var(--sec03) 100%); opacity: 0.2; }
.stats .list {max-width: 1400px; position: relative; z-index: 1;display: flex; align-items: center;align-items: flex-start; justify-content: space-evenly; margin: 0 auto;  padding: 0;}
.stats .item {display: flex; flex-direction: column;align-items: center; padding: 0 1rem; position: relative; text-align: center; width: 100%; }
.stats .num {font-size: var(--fsXL);font-weight: 700; color: var(--pri01);line-height: 1.3;}
.stats .label { font-size: var(--fsP); color:var(--com02); margin-top: 0.5rem;text-align: center; width: 80%;display: block;white-space: normal;}
.mainContent .stats {margin-top: calc(var(--pd) * -1);}
.stats .item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 3rem; background-color: var(--com03);}
.stats .item:nth-child(5n + 1)::before {display: none;}



/* ============== 線上店餐 online ============== */
/* consultBanner */
.online .consultBanner{background-image: url(../Images/product/online/consult_banner.jpg);}

/* 背景 */
.online .block.bg{background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.online .block.bg::before{ content: ''; display: block; width: 100%; padding-top: 100%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}

.online .block.o1 {z-index: 10;}
.online .block.o2::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bggrey.svg);}
.online .block.o3::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}
.online .o4:before {content: ''; width: 100%; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}
.online .block.o5 {z-index: 8;}
.online .block.o5::before { padding-top:40%; height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bggrey.svg);}
.online .block.o6 {z-index: 7;}
.online .block.o6::before { padding-top:40%; height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bggrey.svg);}
.online .block.o7 {z-index: 6;}
.online .block.o7::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}
.online .block.o8 {z-index: 9;}
.online .block.o9 {z-index: 4;}
.online .block.o9::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}
.online .block.o10 {z-index: 10;}

/* 痛點 */
.online .o1 .graphic{ display: block; width: 100%; position: relative; background: url(../Images/product/online/o1.png) no-repeat center; background-size: contain;}
.online .o1 .graphic::after{ content: ''; display: block; padding-top: 56.335%; }
.online .o1 .graphic .circle{ width: 170px; display: inline-flex; justify-content: center; align-items: center; text-align: center; position: absolute; top: 5%; font-style: normal; font-size: 2.3rem; font-weight: 500; color: #595959;border-radius: 50%; background-repeat: no-repeat center; background-size: contain; transition: .3s;}
.online .o1 .graphic .circle::after{ content: ''; display: block; padding-top: 100%;}
.online .o1 .graphic .circle.c1{ left: 1%; background-color:var(--sec05);}

.online .o1 .graphic .circle.c2{ top: 25%; left: 16%; background-color:#FFF3CD; }
.online .o1 .graphic .circle.c3{ top: 3%; left: 31%; background-color:var(--sec02);color: #FFF; width: 190px; }
.online .o1 .graphic .circle.c4{ right: 31%; background-color:#E8E2DF; }
.online .o1 .graphic .circle.c5{ top: 25%; right: 16%; background-color:var(--com04);width: 190px; }
.online .o1 .graphic .circle.c6{ right: 1%; background-color:#F2D7E9; }
.online .o1 .graphic .circle.c6::after{ right: 1%; background-color:#F2D7E9;top: 3%; left: 31%;background: url(../Images/product/online/o1.png) no-repeat center; }

/* 三大點餐模式 */
.online .o3 .intro { display: flex; justify-content: flex-start; align-items: center; }
.online .o3 .intro img{ width: 80px; margin-right: 3rem;}
.online .o3 .group { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0;padding: 3rem 4rem;cursor: pointer;}
.online .o3 .group .txt {display: flex; align-items: center;}
.online .o3 .group .title { margin-right: 4rem;display: inline-block;}
.online .o3 .group .title h3 { font-size:var(--fsM2);font-weight: 600;display: inline-block; margin: 0 0 1rem 0;}
.online .o3 .group .subtitle { font-size:var(--fsM);font-weight: 500; color:#BE6EA1;}
.online .o3 p.pc,.online .o3 p.mobile {font-size:var(--fsP);color:var(--com02);display: inline-block;}

.online .o3 .UI.down {font-size:var(--fsM);}
.online .o3 .item.show .UI.down { transform: rotate(180deg);}
.online .o3 .item{ border-bottom: 2px solid var(--sec02);}
.online .o3 .item:last-child{ border-bottom: 0px;}

.online .o3 .item .intropic { display: none;}
.online .o3 .item.show .intropic{display: flex;justify-content: space-between; border:2px solid var(--sec02);border-radius: 25px;background-color: #FFF;padding: 2rem;margin: 0 1rem 5rem;}
.online .o3 .item.show .intropic img{width: 50%;display:block;margin-bottom: 5rem;}
.online .o3 .item.show .intropic p{ width: 100%; display: block;font-size: var(--fsM);font-weight: 600;color:#595959;}
.online .o3 .item.show .intropic .icon{ position: relative;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 2rem 2rem 2rem 0;}
.online .o3 .item.show .intropic .icon::after{ content: "";position: absolute; display: block; top: 50%; right:-25px; transform: translateY(-50%); width: 30px; height: 115%; background: url('../Images/product/online/line.svg') no-repeat center; background-size: cover;} 
.online .o3 .item.show .intropic .groups .icon{margin: 0 0 2rem 2rem;}
.online .o3 .item.show .intropic .groups .icon:nth-of-type(2){margin: 0 0 0 2rem;}

.online .o3 .item.show .intropic.i1 .groups .icon{display: flex;flex-direction: row;margin: 0 0 0 2rem;}
.online .o3 .item.show .intropic.i1 .groups .icon:nth-of-type(1){padding:0 0 2rem 2rem;border-bottom: 2px solid var(--sec02);}
.online .o3 .item.show .intropic.i1 .groups .icon:nth-of-type(2){padding:2rem 0 0 2rem;}
.online .o3 .item.show .intropic.i1 .groups .icon::after{ content: ""; display: none;} 
.online .o3 .item.show .intropic.i1 .groups .icon img{ width: 35%; margin-bottom: 0; padding: 0.5rem;}

.online .o3 .item.show .intropic.i2 .icon::after{ content: "";width: 30px; height: 110%;}
.online .o3 .item.show .intropic.i2 .groups {margin-left: 5rem;}
.online .o3 .item.show .intropic.i2 .groups .icon{display: flex;flex-direction: row;margin: 2rem;position: relative;}
.online .o3 .item.show .intropic.i2 .groups .icon:after{ content: "";display: none;} 
.online .o3 .item.show .intropic.i2 .groups .icon img{width: 18%; display:block;margin: 0;}
.online .o3 .item.show .intropic.i2 .groups .icon p{width:190px; text-align: left;margin-left: 5rem;}
.online .o3 .item.show .intropic.i2 .groups .icon p span{ font-size: var(--fsP);font-weight: 400;color: var(--com02);display: block;}
.online .o3 .item.show .intropic.i2 .groups .icon::before{ content: ""; position: absolute; width: 20%; height: 100%; top: 50%; left: 9%; transform: translateY(-50%); background: url('../Images/ui/numbers/Num1.svg') no-repeat center; background-size: contain;}
.online .o3 .item.show .intropic.i2 .groups .icon:nth-of-type(2)::before{ background: url('../Images/ui/numbers/Num2.svg') no-repeat center; background-size: contain;}
.online .o3 .item.show .intropic.i2 .groups .icon:nth-of-type(3)::before{ background: url('../Images/ui/numbers/Num3.svg') no-repeat center; background-size: contain;}

.online .o3 .item.show .intropic.i3 .icon:first-of-type,
.online .o3 .item.show .intropic.i3 .icon:nth-of-type(2){ margin: 2rem 2rem 2rem 0;}
.online .o3 .item.show .intropic.i3 .icon:last-of-type{ margin: 2rem 0 2rem 0;}
.online .o3 .item.show .intropic.i3 .icon:last-of-type:after{ content: "";display: none;margin: 2rem 0 2rem 2rem;}


/* 掃碼點餐完整功能 tab-list */
.online .o4 .tab-list{ width: 100%; text-align: center; font-size: 0; padding: 1rem 0;}
.online .o4 .tab-list div{ display: flex; justify-content: space-evenly; margin-bottom: 0.8rem;}

.online .o4 .tab-txt{ display: flex;justify-content: space-evenly; width: 100%; text-align: center; }
.online .o4 .tab-list{border-bottom: solid 2px var(--sec02);margin-bottom: 4rem;}
.online .o4 .tab-list a{ white-space: nowrap; width:200px; display: inline-block; font-size: var(--fsM); font-weight: 500; color: #000; padding: 8px 20px; margin: 5px 10px; border-radius: 10px; transition: .3s; background-color: rgba(255, 255, 255, .3); box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}

.online .o4 .tab-list a:hover,
.online .o4 .t1 .tab-list a.t1,
.online .o4 .t2 .tab-list a.t2,
.online .o4 .t3 .tab-list a.t3{ background-color: var(--sec02); color: #FFF;}

.online .o4 .tab-txt .page{ display: none;}
.online .o4 .t1 .tab-txt .page.t1,
.online .o4 .t2 .tab-txt .page.t2,
.online .o4 .t3 .tab-txt .page.t3{display: flex;justify-content:space-between; align-items: center;align-items: flex-start;margin-bottom: 5rem;}

.online .o4 .tab-intro .intro{ display: none;}
.online .o4 .t1 .tab-intro .intro.t1,
.online .o4 .t2 .tab-intro .intro.t2,
.online .o4 .t3 .tab-intro .intro.t3{ display: block; text-align: center; font-size: var(--fsP); font-weight: 500; color: var(--com02);}

.online .o4 .page .tab-pic li{ display: none;}
.online .o4 .page.p1 .tab-pic li.p1,
.online .o4 .page.p2 .tab-pic li.p2,
.online .o4 .page.p3 .tab-pic li.p3,
.online .o4 .page.p4 .tab-pic li.p4,
.online .o4 .page.p5 .tab-pic li.p5,
.online .o4 .page.p6 .tab-pic li.p6,
.online .o4 .page.p7 .tab-pic li.p7,
.online .o4 .page.p8 .tab-pic li.p8,
.online .o4 .page.p9 .tab-pic li.p9,
.online .o4 .page.p10 .tab-pic li.p10,
.online .o4 .page.p11 .tab-pic li.p11,
.online .o4 .page.p12 .tab-pic li.p12{display: inline-block; text-align: center;}

.online .o4 .tab-pic{ display: inline-block; overflow: hidden;white-space: nowrap;width: 92%; font-size: 0; border-radius: 25px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.online .o4 .tab-pic ul {position: relative; width: 100%;height: 100%;display: inline-block;}
.online .o4 .tab-pic img { width: 100%;display: block;}

.online .o4 .tab-txt .page .group{ width: 100%; padding-left: var(--pd2);}
.online .o4 .tab-txt .page .group h5.title {margin-bottom: 2rem;}
.online .o4 .tab-txt .page .group h5.title .ch { font-size: var(--fsM2); font-weight: 600; line-height: 1.4; text-align: left;}
.online .o4 .tab-txt .page .group li{ text-align: left; font-size: var(--fsP);}
.online .o4 .tab-txt .page .group li span{ display: inline-block; vertical-align: top;}
.online .o4 .tab-txt .page .group .item h5{font-size: var(--fsM); padding: 1.5rem 0; border-bottom: 1px solid var(--sec02);}

.online .o4 .tab-txt .page .group .list li{ font-size: var(--fsM);font-weight: 500;position: relative; padding: 0 0 15px 0;color: #000;padding-left:3rem;display: block;}
.online .o4 .tab-txt .page .group .list li::before { content: '';width: 10px; height: 10px; background-color: var(--com04); border-radius: 50%; position: absolute; top: calc(var(--fsM) / 2); left: 10px;}
.online .o4 .tab-txt .page .group .list li:hover::before{ background-color:var(--sec02);}
.online .o4 .tab-txt .page .group .list li.focus::before{ background-color:var(--sec02);}
.online .o4 .tab-txt .page .group .list b{ font-weight: 500; }
.online .o4 .tab-txt .page .group .list span{ font-size: var(--fsP);font-weight: 400;color: var(--com02); display: block; margin-top: 0.3rem;}

.online .o4 .tab-txt .page .list{ text-align: left; width: 100%;}
.online .o4 .tab-txt .page .group h5 a{ font-size: var(--fsS); color: #FFF; background-color: var(--sec02); border-radius: 30px; padding: 8px 20px; margin-left: 20px; vertical-align: middle; transition: .3s;}
.online .o4 .tab-txt .page .group h5 a:hover{ background-color: var(--sec03); filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));}
.online .o4 .tab-txt .page .list h5{display: flex; align-items: flex-end;justify-content: space-between;}
.online .o4 .tab-txt .page .list li { display: block; cursor: pointer;}

/* 適用各類餐飲型態 mobile */
.online .o5 .tab-list{ width: 100%; text-align: center; font-size: 0; padding: 1rem 0;}
.online .o5 .tab-list div{ display: flex; justify-content: space-evenly; margin-bottom: 0.8rem;}

.online .o5.mobile .tab-txt{ display: block; width: 100%; text-align: center; }
.online .o5.mobile .tab-list{border-bottom: solid 2px var(--sec02);margin-bottom: 4rem;} 
.online .o5.mobile .tab-list a{ white-space: nowrap; width:200px; display: inline-block; font-size: var(--fsM); font-weight: 500; color: #000; padding: 8px 20px; margin: 5px 10px; border-radius: 10px; transition: .3s; background-color: rgba(255, 255, 255, .3); box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}

.online .o5.mobile .tab-list a:hover,
.online .o5.mobile .t1 .tab-list a.t1,
.online .o5.mobile .t2 .tab-list a.t2,
.online .o5.mobile .t3 .tab-list a.t3,
.online .o5.mobile .t4 .tab-list a.t4{ background-color: var(--sec02); color: #FFF;}

.online .o5.mobile .tab-txt .page{ display: none;}
.online .o5.mobile .t1 .tab-txt .page.t1,
.online .o5.mobile .t2 .tab-txt .page.t2,
.online .o5.mobile .t3 .tab-txt .page.t3,
.online .o5.mobile .t4 .tab-txt .page.t4{ width: 100%;display: flex;justify-content:space-between; align-items: center;align-items: flex-start;margin-bottom: 3rem;}
 
.online .o5.mobile .page { position: relative; width:100%;font-size: 0; filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3));margin: 0; }
.online .o5.mobile .page img { width: 100%; height: auto;display: block; position: relative;border-radius:30px;}
.online .o5.mobile .page::after{ content: "";  border-radius:30px; display: block; width: 100%; height: 90%; position: absolute; top: -1px; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 80%) ; z-index: 1;}

.online .o5.mobile .name { width: 100%;padding: 3rem;position: absolute; top: 10px;text-align: center; z-index: 2;left: 50%;transform: translateX(-50%);padding-top :2rem;}
.online .o5.mobile .name h5 {font-size:var(--fsL);  color:var(--sec02); margin-bottom: 1rem;}
.online .o5.mobile .name p { font-size:var(--fsM);font-weight: 400;color:#000; }

/* 適用各類餐飲型態 pc */
.online .o5 .item { position: relative; width: calc(50% - 30px);font-size: 0; filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3));margin: 15px; }
.online .o5 .item img { width: 100%; height: auto;display: block; position: relative;border-radius:30px;}
.online .o5 .item::after{ content: "";  border-radius:30px; display: block; width: 100%; height: 95%;  z-index: 1; position: absolute; top: -1px; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 80%) ; z-index: 1;}

.online .o5 .group { display: flex; flex-wrap: wrap;}
.online .o5 .group .name { width: 100%;padding: 3rem;position: absolute; top: 10px;text-align: center; z-index: 2;left: 50%;transform: translateX(-50%);padding-top :2rem;}
.online .o5 .name h5 {font-size:var(--fsL);  color:var(--sec02); margin-bottom: 1rem;}
.online .o5 .name p { font-size:var(--fsP);font-weight: 400;color:#000; }

/* pointer-map */
.online .btnbox {margin: var(--pd2) 0 1rem 0;}

.online .pointer-map{ width: 100%; position: relative; background: url(../Images/product/Kiosk/k5.png) no-repeat center; background-size: contain; font-size: 0;}
.online .pointer-map .bg{ padding-top: 47.014%;}
.online .pointer-map a.pointer::after{ content: ''; left: 0; top: 0;background-color: rgba(255, 229, 253, 0.8); }
.online .pointer-map a.pointer b{left: 0; top: 0;}

.online .pointer-map a.pointer.m1,
.online .pointer-map > dl.m1{top: 15%; left: 16%;}
.online .pointer-map a.pointer.m2,
.online .pointer-map > dl.m2{top: 45%; left: 35%;}
.online .pointer-map a.pointer.m3,
.online .pointer-map > dl.m3{top: 11%; left: 45%;}
.online .pointer-map a.pointer.m4,
.online .pointer-map > dl.m4{top: 20%; left: 40%;}
.online .pointer-map a.pointer.m5,
.online .pointer-map > dl.m5{top: 61%; left: 46%;}
.online .pointer-map a.pointer.m6,
.online .pointer-map > dl.m6{top: 53%; left: 54%;}
.online .pointer-map a.pointer.m7,
.online .pointer-map > dl.m7{top: 13%; left: 65%;}
.online .pointer-map a.pointer.m8,
.online .pointer-map > dl.m8{top: 58%; left: 76%;}
.online .pointer-map a.pointer.m9,
.online .pointer-map > dl.m9{top:60%; left: 86%;}
.online .pointer-map a.pointer.m10,
.online .pointer-map > dl.m10{top: 10%; left: 86%;}

/* ============== 數位廣告看板 billboard ============== */
.product.billboard{}
.billboard .block{ padding: var(--pd2) 0; }
.billboard .article{}
.billboard .article .block.b1{text-align:center; }
.billboard .article .block.b1 img{ max-width: 100%;}
.billboard .article .block.b2{}
.billboard .article .block.b3{ z-index: 1; mix-blend-mode: darken;}
.billboard .article .block.b3 .pic{width:100%; text-align:center;}
.billboard .article .block.b3 .pic img{ max-width: 100%;}

.billboard .block.b4{ text-align: center; margin-bottom: var(--pd2);}
.billboard .block.b4::after{content:""; position:absolute; width: 100%; height:calc(100% + 300px + var(--pd2)); background-image: url(../Images/inPageBgG7.svg); background-position: center top; background-repeat: no-repeat top; background-size: cover; top: -300px; left: 0; z-index: -1; }


/* ============== 產品頁-發票加值系統 einvoice ============== */
.block .pic{ display: block; width: 100%; text-align: center;}
.block .pic img{ max-width: 100%;}

/* .einvoice .pc{ display: inline-block;} */
.einvoice .listStyle01{width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content: space-around; padding: 2rem  2rem 0 ;}

/* 背景 */
.einvoice .consultBanner{background-image: url(../Images/product/einvoice/consult_banner.jpg);}

.einvoice .block{background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.einvoice .block::before,
.einvoice .block::after{ content: ''; display: block; width: 100%; padding-top: 100%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}

.einvoice .block.e1 {z-index: 10;}
.einvoice .block.e2 {z-index: 9;}
.einvoice .block.e2::before { top: -130px; padding-top: 30%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.einvoice .block.e3 {z-index: 8;}
.einvoice .block.e3::before { top: -130px; padding-top: 30%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.einvoice .block.e4 {z-index: 7;}
.einvoice .block.e4::before { top: -130px; padding-top: 40%; background-image: url(../Images/bgCurve/kiosk_bggrey.svg);}
.einvoice .block.e4a {padding: 0 ;}
.einvoice .block.e5 {z-index: 6;}
.einvoice .block.e5::before { top: -130px; padding-top: 30%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.einvoice .block.e6 {z-index: 5;}
.einvoice .block.e6::before { top: -150px; padding-top: 37%; background-image: url(../Images/bgCurve/kiosk_bggrey.svg);}
.einvoice .block.e6a { padding:0 ;}
.einvoice .block.e7 {z-index: 4; }
.einvoice .block.e7::before { top: -130px; padding-top: 19%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.einvoice .block.e7a { padding:0 ;}
.einvoice .block.e8 {z-index: 3;}
.einvoice .block.e8::before { top: -130px; padding-top: 25%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.einvoice .block.e9 {z-index: 2;}
.einvoice .block.e9::before { top: -130px; padding-top: 30%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.einvoice .block.e10 {z-index: 1;}
.einvoice .block.e10::before { top: -130px; background-image: url(../Images/bgCurve/kiosk_bggrey.svg);}
.einvoice .block.e11 {z-index: 2;}


/* 導入電子發票 */
/* .einvoice .e2 .articalList.box li{ line-height: 1.2;}
.einvoice .e2 .articalList.box li.l2 { height:calc(var(--fsM)*2.5*1.2);}
.einvoice .e2 .articalList.box li.l3 { height:calc(var(--fsP)*3*1.4);} */

/* 電子發票吃到飽 */
.einvoice .listStyle01 b{ margin-bottom: 0.5rem;}
.einvoice .listStyle01 ul li:first-child{ margin-right: 30px;}
.einvoice .listStyle01 ul li:last-child{ padding-left:30px;}

/* 適用多元產業與對象 */
.einvoice .e5 .articalList.box ul{ width: calc(100% / 4 - 20px);}
.einvoice .e5 .articalList.box li img{ width: 50%; }

/* 多元彈性的串接方式 */
.einvoice .e6 .group  {display: flex;}
.einvoice .e6 .group .item {width: 100%;padding: 3rem;background-color: #FFF; border-radius: 25px; border: solid 3px var(--sec02);margin: 2rem;}
.einvoice .e6 .group .item .title {font-size: var(--fsL);font-weight: 700;color:var(--sec02);text-align: center;margin-bottom: 5rem;}
.einvoice .e6 .group .item .title::before {content: ''; width: 10px; height: 10px; border-radius: 50%;margin-right: 1rem;}

.einvoice .e6 .group .item dl {display: block; font-size: var(--fsM);position: relative;}
.einvoice .e6 .group .item dl.dot dd span{display: block; margin-bottom: 0.5rem;width: fit-content;}
.einvoice .e6 .group .item dl.dot dd div{ display: inline-block; }
 
.einvoice .e6 .group .item dl.dot dd span:nth-child(4){margin-bottom: 0;}
.einvoice .e6 .group .item dl.dot dd span::before{ content: ''; display: inline-block; vertical-align: middle;width: 6px; height: 6px; background-color: var(--sec02); border-radius: 50%;margin-right: 1rem;} 
.einvoice .e6 .group .item dl:last-of-type dd{margin-bottom: 0rem;}
.einvoice .e6 .group .item dt {display: block; font-size: var(--fsP);font-weight: 500;text-align: center;padding: 0.8rem 2rem; background-color:var(--com03);color: #FFF;border-radius:25px 25px 25px 0;width: fit-content;position: absolute;z-index: 5;top: -30px;}
.einvoice .e6 .group .item dd {font-size: var(--fsP); font-weight: 400;text-align: center; padding: 2rem 3rem 1.5rem 3rem; background-color:#F5F5F5;width:100%;border-radius: 15px; margin-bottom: 4rem;}

/* 舊的 */
.einvoice .block.e2{ display: flex; align-items:center;}
.einvoice .e2 img{ width: 50%; max-width: 690px;}
.einvoice .e2 .list{border: 3px solid var(--pri04); border-radius: 30px; padding: 30px; background-color: rgba(255,255,255,.6);}
.einvoice .e2 .list li{ font-size: var(--fsP); padding-left: 30px; position: relative; margin-bottom: 30px; width: 100%;}
.einvoice .e2 .list li.head{ font-size: var(--fsM2); font-weight: 700; margin-bottom: 0; }
.einvoice .e2 .list li.head::before{ content: ''; width: 10px; height: 10px; background-color: var(--pri04); border-radius: 50%; position: absolute; top: calc((var(--fsM2)/2 + 2px)); left: 5px;}

.einvoice .e8 h2{ text-align: center; margin-bottom: 35px; margin-top: 20px;}
.einvoice .e8 .txt { width: 100%; display: flex; align-items: center; justify-content: space-evenly; text-align: left;}
.einvoice .e8 ul{ display: block;}
.einvoice .e8 li{ display: block; font-size: var(--fsP); color: var(--sec04); margin-bottom: var(--pdq);}
.einvoice .e8 li.t1{ font-size: var(--fsM); color:#000; font-weight:400;  line-height: 1.5; margin-bottom: var(--pd);}
.einvoice .e8 li.t2{ font-size: var(--fsM); color:#000; font-weight: 700; margin-bottom: 0;}
.einvoice .e8 li:last-child{ margin-bottom: 0;}
.einvoice .e8 li a.btn{background-color:var(--sec02); color:#ffffff; letter-spacing:0; padding:10px 30px; }
.einvoice .e8 img{ max-width: 385px; width: 100%;}

.einvoice .list1{font-size: 0; text-align: center; margin-top: var(--pd);}
.einvoice .list1 ul{ width: calc(100%/3 - 40px); text-align: left; vertical-align: middle; margin: 20px; vertical-align: top;}
.einvoice .list1 ul li{ width: 100%; font-size: var(--fsP); text-align: center; }
.einvoice .list1 ul li img{ max-width: 100%; }
.einvoice .list1 ul li.l2{ font-size: var(--fsM); font-weight: 700; }
.einvoice .list1 ul li.l2 b{font-size: var(--fsL); margin:0 5px; display: inline-block;}

.einvoice .e5 p{ width: 90%; margin: 0 auto; max-width: 900px;}
.einvoice .list3{font-size: 0; text-align: center; margin-top: var(--pd);}
.einvoice .list3 ul{ width: calc(100%/3 - 40px); text-align: left; vertical-align: middle; margin: 20px; vertical-align: top;}
.einvoice .list3 ul li{ width: 100%; font-size: var(--fsP); text-align: center; }
.einvoice .list3 ul li img{ max-width: 100%; }
.einvoice .list3 ul li.l2{ padding: 15px 0 0;}
.einvoice .list3 ul li.l3 b{font-size: var(--fsL); margin-left: 5px; display: inline-block;}

.einvoice h4.title b.gdTxt{ display: block;}

/* ============== 產品頁-手持行動點餐機 mPOS ============== */
.mPOS .list1 {font-size: 0; text-align: center; margin-top: var(--pd);}
.mPOS .list1 ul{width: calc(100% / 4 - 40px);text-align: left;vertical-align: middle;margin: 20px;vertical-align: top;}
.mPOS .list1 li{width: 100%; font-size: var(--fsP); text-align: center;}
.mPOS .list1 li.l2{font-size:var(--fsM); font-weight:700; padding:15px 0 0;}

.product.mPOS{}
.product.mPOS h2{}
.product.mPOS h1 span,
.product.mPOS h2 span{font-size:var(--fsM); display:block; color:#000; font-weight:normal;}
.product.mPOS h1 b,
.product.mPOS h2 b{font-size:var(--fsL);}
.product.mPOS h1 b span,
.product.mPOS h2 b span{display:inline-block;font-size:var(--fsM);}


.product.mPOS .item{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.product.mPOS .item dl{text-align:center;}
.product.mPOS .item dt{display:block;}
.product.mPOS .item dd{display:block; text-align:center; font-size:var(--fsM);}
.product.mPOS .item dd a{display:block; font-size:var(--fsP);}
.product.mPOS .item.i3{}
.product.mPOS .item.i3 dl{width:30%;}
.product.mPOS .item.i3 a{background:var(--gradient17); color:#000; max-width:60%; font-size:var(--fsS); margin:auto;}
.product.mPOS .item.i4{}
.product.mPOS .item.i4 dl{width:25%;}

.product.mPOS .block1{}

.product.mPOS .block2{background-image:url(../Images/inPageBgG6.svg); background-position:right top; background-repeat:no-repeat; background-size:cover; padding:260px 0 150px 0;}
.product.mPOS .block2 .container{display:flex; justify-content:center; align-items:center;}
.product.mPOS .block2 .photo{}
.product.mPOS .block2 dl{position:relative;}
.product.mPOS .block2 dt{position:relative; z-index:10;}
.product.mPOS .block2 dd{position:absolute; top:120px; left:20px;}
.product.mPOS .block2 dd img{width:90%;}
.product.mPOS .block2 ul{width:calc(50% - 50px); margin-left:50px; margin-left:50px;}
.product.mPOS .block2 li{font-size:var(--fsP); display:block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid 1px #000;}
.product.mPOS .block2 li a{color:#000;}
.product.mPOS .block2 li:last-child{border:none;}
.product.mPOS .block2 li b{font-size:var(--fsM); display:block;}
.product.mPOS .block2 li:hover b{color:var(--pri01);}

.product.mPOS .block2 dd{display:none;}
.product.mPOS .block2 .pos1 dd.p1,
.product.mPOS .block2 .pos2 dd.p2,
.product.mPOS .block2 .pos3 dd.p3,
.product.mPOS .block2 .pos4 dd.p4{display:block;}
.product.mPOS .block2 li span{display:none;}
.product.mPOS .block2 .pos1 li.w1 span,
.product.mPOS .block2 .pos2 li.w2 span,
.product.mPOS .block2 .pos3 li.w3 span,
.product.mPOS .block2 .pos4 li.w4 span{display:block; font-weight:300;}

.product.mPOS .block3{}

.product.mPOS .block4{background-image: url(../Images/inPageBgG6.svg); background-position: right top; background-repeat: no-repeat; background-size: cover; padding: 260px 0 150px 0;}


/* ============== 產品頁-超級店長 mStore ============== */
.block .pad{ display: inline-block; position: relative; width: 100%; background-image: url(../Images/product/mStore/b1-pad.png); background-size: contain; background-repeat: no-repeat;}
.block .pad::after{ content: ''; display: block; padding-top: 63.117%;}
.block .pad img{ position: absolute; top: calc(50% + 8px); left: 25px; width: calc(100% - 50px); transform: translateY(-50%); border-radius: 20px; overflow: hidden;}

.mStore{}
.mStore .articalList ul{ /*max-width: 250px;*/}
.mStore .articalList img{ width: 206px;}
.mStore .articalList .l2{ line-height: 1;}
.mStore .articalList .l2 span{ display: inline-block; width: 100%; font-size: var(--fsS); }
.mStore .articalList .l3{ text-align: left;}
.mStore .pad{ width: calc(100% - 20px); margin-left: 20px;}


.mStore .block.b1{ font-size: 0;}
.mStore .b1 .bg-shape::before{ top: -20%; right: -10%;}
.mStore .b1 .bg-shape::after{ bottom: -10%; left: -20%;}
.mStore .b1 h4{ text-align: left;}
.mStore .b1 .left, .mStore .b1 .right{ vertical-align: middle;}
.mStore .b1 .left{ width: 33%; display: inline-block; }
.mStore .b1 .right{ width: 66%;}
.mStore .b1 .right li{ display: none; width: 100%; text-align: center;}
.mStore .b1 .right li.focus{ display: inline-block;}
.mStore .b1 .time-list{ display: block;}
.mStore .b1 .time-list a{width: 100%; padding: 10px 0 13px;}
.mStore .b1 .time-list a i{ font-size: 40px; font-style: normal; font-weight: 300; letter-spacing: -1px; line-height: 1;}
.mStore .b1 .time-list a i b{ font-size: 30px; font-weight: 300; margin-left: 5px;}
.mStore .b1 .time-list a:hover i,
.mStore .b1 .time-list a:hover i b{ font-weight: 500;}
.mStore .b1 .time-list a span{ display: none; width: 100%; font-size: 18px; font-weight: 300; margin-top: 5px; }
.mStore .b1 .time-list a.focus{ padding-left: 20px; border-left: 3px solid transparent; border-image: var(--gradient04); border-image-slice: 1;}
.mStore .b1 .time-list a.focus i{ font-size: 50px; font-weight: 500; -webkit-background-clip: text; -webkit-text-fill-color: transparent!important; -webkit-box-decoration-break: clone; display: inline-block; background-image: var(--gradient11);}
.mStore .b1 .time-list a.focus i b{ font-size: 40px; font-weight: 500;}
.mStore .b1 .time-list a.focus span{ display: inline-block; }

.mStore .block.b2{background-image:url(../Images/inPageBgG4.svg); background-size:auto 130% ; background-repeat:no-repeat; background-position:top; position:relative; position:relative;}
.mStore .block.b2 .tagList{width:80%; position:absolute; bottom:0; left:0; height:210px; margin-left:10%;}
.mStore .block.b2 a.tag1,
.mStore .block.b2 a.tag2,
.mStore .block.b2 a.tag3,
.mStore .block.b2 a.tag4{width:calc((100% / 4) - 5px); height:200px; z-index:5;}
.mStore .block.b2 a.tag1{}
.mStore .block.b2 a.tag2{}
.mStore .block.b2 a.tag3{}
.mStore .block.b2 a.tag4{}

.mStore .block.b4{ background-image: url(../Images/product/mstore/b4-bg.jpg); background-size: 100% auto; background-repeat: no-repeat; background-position: top; text-align: center;}
.mStore .b4 img{width:100%; max-width:1100px;}

.mStore .b6 .bg-shape::before{ bottom: -10%; left: -20%;}
.mStore .b6 .bg-shape::after{ top: -20%; right: -10%;}

.mStore .block.b7{ text-align: center; font-size: 0;}
.mStore .b7 h4{ display: inline-block; width: 50%; margin-right: -6%; margin-bottom: 25px; text-align: left; vertical-align: middle; }
.mStore .b7 img{ vertical-align: middle; width: 56%; max-width: 739px;}

.mStore .block.b8{ padding-bottom: 0; background-image: url(../Images/inPageBgG4.svg); background-size: 130% auto; background-repeat: no-repeat; background-position: top;}

.mStore .block.b9{ padding-top: 300px; background-image: url(../Images/inPageBgG7.svg); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}


/* ============== 產品頁-SaaS服務中台 laas ============== */
.laas .block.l1{ font-size: 0;}
.laas .block.l1 .left,
.laas .block.l1 .right{ display: inline-block; vertical-align: middle; width: 50%; position: relative;}
.laas .block.l1 .left{ padding-right: 100px;}
.laas .block.l1 .left h4.title{ margin-bottom: 20px; text-align: left; font-weight: 900;}
.laas .block.l1 .left::after{ content: ''; width: 928px; height: 548px; background-image: url(../Images/product/SaaS/laas01a.svg); position: absolute; top: 50%; right: 60px; transform: translateY(-50%);}
.laas .block.l2::after{ content: ''; width: 940px; height: 563px; position: absolute; z-index: -1; top: 30%; right: -30%; background-image: url(../Images/inPageBgG18.svg); background-repeat: no-repeat; background-size: 100%; background-position: center;}
.laas .block.l2 .articalList ul{ max-width: 300px;}

.laas .block.l3{ z-index: 2; }
.laas .block.l3 .container-belt,
.laas .block.l3 img{ height: 989px; max-width: none;}
.laas .block.l3 img{ position: absolute; top: 0; right: 40%; transition: .3s;}
.laas .block.l3 h4{ position: absolute; width: 40%; top: 50%; right: calc(var(--pd) + var(--pd)); transform: translateY(-50%); text-align: left; margin-bottom: 0; z-index: 2;}
.laas .block.l3::after{ content: ''; width: 1920px; height: 100%; padding-top: 69.767%; position: absolute; z-index: -1; top: 50%; right: 0; transform: translateY(-50%); background-image: url(../Images/inPageBgG6.svg); background-repeat: no-repeat; background-size: 100%; background-position: center;}
.laas .block.l4{ background-image: url(../Images/product/SaaS/laas04-bg.jpg); background-size: cover; background-position: center; z-index: -1; margin-top: -300px; padding-top: calc(300px + var(--pd2)); padding-bottom: 300px;}
.laas .block.l4 h4{ color: #FFF;}
.laas .block.l5 .articalList ul{ width: calc(100% / 4 - 40px); margin-top: 0;}
.laas .block.l5::after,
.laas .block.l7::after{ content: ''; width: 100%; padding-top: 69.767%; position: absolute; z-index: -1; top: -300px; right: 0; background-image: url(../Images/inPageBgG6.svg); background-repeat: no-repeat; background-size: 100%; background-position: center; transition: .3s;}
.laas .block.l7{ padding-top: 200px;}
.laas .block.l7::after{ top: -100px;}


/* ============== 產品頁-Kiosk自助點餐機 kiosk ============== */
.kiosk .mapbox h2.title,
.kiosk .mapbox span {padding: 0 var(--pdh);}
.kiosk .btnbox {margin-top: var(--pd);}
.kiosk .consultBanner{background-image: url(../Images/product/Kiosk/consult_banner.jpg);}

/* 背景 */
.kiosk .block{background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.kiosk .block::before{ content: ''; display: block; width: 100%; padding-top: 100%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}

.kiosk .block.k1 {z-index: 4;}
.kiosk .block.k2::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bggrey.svg);}
.kiosk .block.k3::before { padding-top:0; height: 50%; top: -150px; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.kiosk .k4:before {content: ''; width: 100%; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}
.kiosk .block.k6::before { height: 50%; top: -175px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
/* .kiosk .block.k6  { margin-top: -300px; padding-top: 300px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);} */
.kiosk .block.k7 {z-index: 1;}
.kiosk .block.k7 h2.title {margin-bottom: var(--pd);}
.kiosk .block.k7::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}
.kiosk .block.k8 {z-index: 3;}
.kiosk .block.k8::before { padding-top:0; height: 50%; top: -175px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.kiosk .block.k9 {z-index: 2;}
.kiosk .block.k9::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}
.kiosk .block.k10 {z-index: 2;}
.kiosk .block.k10::before {padding-top:0; height: 50%; top: -180px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.kiosk .block.k11 {z-index: 1;}
.kiosk .block.k11::before { height: 50%; top: -100px; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg);}

/* 跨國展店 k1 */
/* .kiosk .k1 .articalList li.l3 { height:calc(var(--fsM)*3*1.4); display: flex; flex-direction: column;justify-content: center;} */
.kiosk .k1 .articalList li.l3 {padding: 0;color:var(--com02);}
.kiosk .k1 .articalList ul{width:calc(100% / 5 - 20px); margin:10px; vertical-align:top; height: 350px; padding: 1rem var(--pdh); background-color: rgba(255, 255, 255, .3); border-radius: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.kiosk .k1 .articalList ul:hover{ box-shadow: 0px 1px 8px rgba(255, 208, 0, 0.925);}
.kiosk .k1 img {width: 120px; margin-bottom: 1rem; }
.kiosk .k1 li.l2{color: var(--com02);}
/* .kiosk .k1 li.l3 b{font-size: var(--fsM); color: var(--pri01); margin-left: 5px;display: inline-block;} */
.kiosk .k1 li.l4 b{font-size: var(--fsL); color: var(--pri01);display: inline-block;}

/* 完整功能模組 k2 */
.kiosk .k2{ text-align: center;}
.kiosk .k2 .group{ display: flex; align-items: center; font-size: var(--fsM); margin-bottom: var(--pd); }
.kiosk .k2 .container-belt{display: flex; justify-content: space-around ;align-items: center;}
.kiosk .k2 dl{display: inline-block;width: 100%;white-space: nowrap;}
.kiosk .k2 dt{position: relative; z-index: 10;}
.kiosk .k2 dd { font-size: 0;border: 40px solid #e9e9e9; width: 100%; border-radius: 20px; position: relative; }
.kiosk .k2 dd::before{ content: ""; width: 40px; border: 8px solid #585858; top: -30px;border-radius: 50px;position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; }
.kiosk .k2 .photo{ width: 40%; /* width: 28%;*/ } 
.kiosk .k2 li b { font-weight:500;}

.kiosk .k2 .pager{padding: 2rem 0 0 0;}
.kiosk .k2 .pager a{ font-size: 0; background-color: var(--com04); width: 10px; height: 10px; margin: 0 5px; padding: 0; border-radius: 10px; display: inline-block; transition: .3s;}
.kiosk .k2 .pager a.focus,
.kiosk .k2 .pager a:hover{ background-color: var(--pri01);}

.kiosk .k2 .txt{ position: relative;text-align: left; width: 50%;}
.kiosk .k2 .txt div{ text-align: left;border-bottom:solid 1px var(--com04); padding: 0 1rem ;margin-bottom: 2rem;}
.kiosk .k2 .txt div:last-child{ margin-bottom: 0;}
.kiosk .k2 .txt ul{ font-size: var(--fsM); font-weight: 700; color: var(--sec02); margin-bottom: 1rem;}
.kiosk .k2 .txt li{  display: block; font-size: var(--fsP); position: relative; padding-left :25px;margin-bottom:1rem; cursor: pointer;}
.kiosk .k2 .txt li::before{content: ''; width: 10px; height: 10px; background-color: var(--com04); border-radius: 50%; position: absolute; top: calc(var(--fsP)/2); left: 0px;}
.kiosk .k2 .txt li.focus::before {background: var(--sec01);}
.kiosk .k2 .txt li:hover::before{ background-color: var(--sec01); }
.kiosk .k2 .txt li:last-child{margin-bottom: 2rem;}
.kiosk .k2 h2.title{ margin-bottom: var(--pd);}

/* 靈活運用 k3 */
.kiosk .k3 .list { text-align: center; font-size: 0;}
.kiosk .k3 .list .item {display: inline-block; width: calc(100% / 2 - 40px);vertical-align: top;}

.kiosk .k3 h3 { color: #fff;background-color: #EE5C5D;border-radius: 20px 20px 0 0 ;padding: 15px!important; width: 100%; text-align: center; }
.kiosk .k3 .item ul li{font-size: var(--fsP);}

.kiosk .k3 .item ul:nth-child(2) li{height:calc(var(--fsM)*2*1.2);}
.kiosk .k3 .item:nth-child(1) { color:#E74A48; }
.kiosk .k3 .item:nth-child(2) h3,
.kiosk .k3 .item:nth-child(2) .keywords span {background-color: #FFC52B;}
.kiosk .k3 .item:nth-child(2) {background-color: #FFF2CF;}
.kiosk .k3 .item:nth-child(2) { color:#DA7A0D; }

.kiosk .k3 .item:nth-child(3) h3,
.kiosk .k3 .item:nth-child(3) .keywords span  {background-color: #26BCD4;}
.kiosk .k3 .item:nth-child(3) {background-color: #C7EAF0;}
.kiosk .k3 .item:nth-child(3) { color:#006796; }

.kiosk .k3 .item:nth-child(4) h3,
.kiosk .k3 .item:nth-child(4) .keywords span {background-color: #E1A5CD;}
.kiosk .k3 .item:nth-child(4) {background-color: #F6E4F0;}
.kiosk .k3 .item:nth-child(4) { color:#B751A0; }

.kiosk .k3 h3 b { font-size: var(--fsL); font-weight: 500;}
.kiosk .k3 h3 span {font-size: var(--fsM2); font-weight: 400;}

.kiosk .k3 .item { background-color: #FFE6DF;border-radius: 20px; margin: 10px;}
.kiosk .k3 .item .serviceitem{padding: 20px 30px;}

.kiosk .k3 .item .group{display: flex; align-items: center;justify-content: space-between; margin-bottom: 15px;}
.kiosk .k3 .item .group img { width:320px;padding-right:15px;}
.kiosk .k3 .item .keywords { font-size: 0; text-align: center; display:inline-block; width: 100%;}
.kiosk .k3 .item .keywords span { font-size: var(--fsP); display: inline-block; background-color: #EE5C5D;color:#fff; padding: 7px 5px; margin:5px; border-radius: 30px;;width: calc(50% - 10px);text-align: center;}

/* .kiosk .k3 .item .features{ display: flex;flex-wrap: wrap; justify-content: space-evenly; width: 100%; text-align: center; }
.kiosk .k3 .item .features img { display:inline-block; width: 32px; margin-right: 7px; vertical-align: middle;}
.kiosk .k3 .item .features li {display:inline-block;vertical-align: baseline; margin: 5px;}
.kiosk .k3 .item .features span { font-size: var(--fsP); display: inline-block; color: #63625E;vertical-align: middle;} */

/* 最多連鎖品牌 k4 */

/* 從點餐到分析 k5 */
.kiosk .pointer-map{ width: 100%; position: relative; background: url(../Images/product/Kiosk/k5.png) no-repeat center; background-size: contain; font-size: 0;}
.kiosk .pointer-map .bg{ padding-top: 47.014%;}
.kiosk .pointer-map a.pointer::after{ content: ''; left: 0; top: 0;background-color: rgba(255, 229, 253, 0.8); }
.kiosk .pointer-map a.pointer b{left: 0; top: 0;}

.kiosk .pointer-map a.pointer.m1,
.kiosk .pointer-map > dl.m1{top: 15%; left: 16%;}
.kiosk .pointer-map a.pointer.m2,
.kiosk .pointer-map > dl.m2{top: 45%; left: 35%;}
.kiosk .pointer-map a.pointer.m3,
.kiosk .pointer-map > dl.m3{top: 11%; left: 45%;}
.kiosk .pointer-map a.pointer.m4,
.kiosk .pointer-map > dl.m4{top: 20%; left: 40%;}
.kiosk .pointer-map a.pointer.m5,
.kiosk .pointer-map > dl.m5{top: 61%; left: 46%;}
.kiosk .pointer-map a.pointer.m6,
.kiosk .pointer-map > dl.m6{top: 53%; left: 54%;}
.kiosk .pointer-map a.pointer.m7,
.kiosk .pointer-map > dl.m7{top: 13%; left: 65%;}
.kiosk .pointer-map a.pointer.m8,
.kiosk .pointer-map > dl.m8{top: 58%; left: 76%;}
.kiosk .pointer-map a.pointer.m9,
.kiosk .pointer-map > dl.m9{top:60%; left: 86%;}
.kiosk .pointer-map a.pointer.m10,
.kiosk .pointer-map > dl.m10{top: 10%; left: 86%;}

/* 技術整合 k6 */
/* .kiosk .k6 .iconList > div{ display: inline-block; width: calc(100%/5 - 10px); vertical-align: top; padding: 1.5rem ; background-color: rgba(255,255,255,.3);border-radius: 25px; box-shadow: 0px 1px 8px rgba(0,0,0,.25); text-align: center;}
.kiosk .k6 .iconList img {width: 100px; height: 100px; margin-bottom: 1rem;}
.kiosk .k6 .iconList .txt {display: block; text-align: center; }
.kiosk .k6 .iconList b{ display: inline-block; width: 100%; font-size: var(--fsM); font-weight: 600; margin: 0;}
.kiosk .k6 .iconList.show b {margin-bottom: 1rem;}

.kiosk .k6 .iconList p{ margin-bottom: 1rem;}
.kiosk .k6 .iconList ul li{ font-size: var(--fsP); font-weight: 400; text-align: left;display: block; padding:0px 0px 30px 30px; margin-bottom: 0.5rem; position: relative; padding-bottom: 0px;}
.kiosk .k6 .iconList ul li::before{content: ''; width: 8px; height: 8px; background-color: var(--sec02); border-radius: 50%; position: absolute;  top: calc(var(--fsS) / 2); left: 7px;}

.kiosk .k6 .iconList p,
.kiosk .k6 .iconList ul {display: none;}
.kiosk .k6 .iconList.show p{display: inline-block;}
.kiosk .k6 .iconList.show ul {display: flex ;flex-wrap: wrap; justify-content: flex-start; } 

.kiosk .k6 a.btn{display: block; text-align: center; background-color: transparent; color: var(--sec02);margin-top: 1rem;font-weight: 500;}
.kiosk .k6 a.btn:hover{filter: none;}

.kiosk .k6 a.btn span.off{display: none;}
.kiosk .k6 .iconList.show + a.btn span.on {display: none;}
.kiosk .k6 .iconList.show + a.btn span.off {display: inline-block;}

.kiosk .k6 a.btn .UI.next {display: inline-block;transform: rotate(90deg);}
.kiosk .k6 .iconList.show + a.btn .UI.next {transform: rotate(-90deg); } */

/* 連鎖品牌 k12 */
.kiosk .k12 {z-index: 2;}
.kiosk .k12 .itemNum { display: flex; flex-wrap: wrap;  width: 100%;}
.kiosk .k12 .item { width: calc(100% / 2 - 2rem); position: relative;  margin: 1rem;display: flex;position: relative; }
.kiosk .k12 .txt { border-radius: 20px; padding: 2.5rem ;background-color: #ffffff;box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.kiosk .k12 .txt li { z-index: 1;display: block; margin-bottom: 1rem;  font-size: var(--fsP);text-align: left; position: relative; }
.kiosk .k12 .txt li.k1 {font-size: var(--fsM); font-weight: 700;margin-bottom: 1rem;}
.kiosk .k12 .txt li.k2 {color:var(--com02);padding-right: 5rem; line-height: 1.5; } /* height:calc(var(--fsP)*3*1.5); */
.kiosk .k12 .txt li b{ color: var(--pri01);}
.kiosk .k12 a.btn{position: relative; padding: 8px 20px 8px 20px;font-weight: 400; z-index: 10;}

.kiosk .k12 .txt::after { content: "";opacity: 0.5;position: absolute; right: 1rem;top: 50%;transform: translateY(-50%);width: 150px; height: 100%; background-repeat: no-repeat; background-position: center right;  background-size: contain; pointer-events: none; }
.kiosk .k12 .item:nth-child(1) .txt::after { background-image: url(../Images/ui/numbers/Num1.svg); }
.kiosk .k12 .item:nth-child(2) .txt::after { background-image: url(../Images/ui/numbers/Num2.svg); }
.kiosk .k12 .item:nth-child(3) .txt::after { background-image: url(../Images/ui/numbers/Num3.svg); }
.kiosk .k12 .item:nth-child(4) .txt::after { background-image: url(../Images/ui/numbers/Num4.svg); }

/* 多元自助點餐機選擇 k7 */
.kioskProduct .group{ font-size: 0;text-align: right;position: relative; white-space: nowrap;transform: translateX(-3.75%); }
.kioskProduct .mask { overflow:hidden;}

.kioskProduct .item li.i2::before{ content: '型號';}
.kioskProduct .item li.i3::before{ content: '推薦業態';}
.kioskProduct .item li.i4::before{ content: '螢幕尺寸';}
.kioskProduct .item li.i5::before{ content: '解析度';}
.kioskProduct .item li.i6::before{ content: '作業系統';}
.kioskProduct .item li.i7::before{ content: '網路';}
.kioskProduct .item li.i8::before{ content: '選配設備';}
.kioskProduct .item li.i9::before{ content: '付款方式';}
.kioskProduct .item li.i10::before{ content: '安裝方式';}

.kioskProduct .item li {position: relative; white-space: normal; }
.kioskProduct .item li::before { position: absolute; font-weight: 500; right:100%; top:0; width: 70%; height:100%; padding: 0 1rem; background-color:var(--sec03);  display: flex; justify-content: center; align-items: center;}

.kioskProduct .item.kp2 li::before,
.kioskProduct .item.kp3 li::before,
.kioskProduct .item.kp4 li::before{display: none; }

.kioskProduct .item{width:25%;display: inline-block;vertical-align: top; }
.kioskProduct ul li {font-size: var(--fsP); background-color:#fff; display: block; padding: 0 1rem;text-align: center; min-height: 55px; display: flex; justify-content: center; align-items: center; border:1px solid #e6e6e6;}
.kioskProduct ul {}
.kioskProduct .item li.i3{min-height: 85px;}
.kioskProduct .item li.i8{text-align: left;min-height: 150px;}
.kioskProduct ul.head { background-color: var(--sec03); font-weight: 500; }
.kioskProduct .item img {padding: 2rem 0; filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));}
.kioskProduct .item li.i1{ background-color: transparent;border: 0px;}
.kioskProduct .item li.i2::before{border-radius: 20px 0 0 0;}
.kioskProduct .item li.i10::before{border-radius: 0 0 0 20px;}
.kioskProduct .item.kp4 li.i2{border-radius: 0 20px 0 0;}
.kioskProduct .item.kp4 li.i10{border-radius: 0 0 20px 0;}

.kioskProduct a.UI,
.kioskProduct .pager{display: none;}

/* ============== 產品頁-AI ============== */
.bodybox.AI .inPagekv{background-image:url(../Images/product/ai/case-banner1.jpg);}
.AI .block .container,
.AI .block .container-belt{ text-align: center;}
.AI .listStyle01 ul li:nth-of-type(2){ text-align: left;}
.AI img.shdw{ filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));}
.AI h4.title span{ font-size: var(--fsM); font-weight: 700;}

.photoflow{display: flex; justify-content: center; align-items: center;}
.photoflow li{}
.photoflow li.f1{}
.photoflow li.f2{}
.photoflow li.f3{ background-image: url(../Images/product/ai/arrow.svg); background-position: center; background-repeat: no-repeat; width: 40px; height: 80px; margin: 0 20px;}
.photoflow li span{ display: block; font-size: var(--fsP); font-weight: 700;}
.photoflow img.add{ width: 40px; margin: 20px;}

.photoflow .pwords{ border: 3px solid transparent; border-radius: 0 50px 50px 50px; min-width: 340px; height: 100px; padding: 30px; filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2)); position: relative; overflow: hidden; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #FFF, #FFF), var(--gradient18);}
.photoflow .pwords li{ display: none; font-size: var(--fsP); font-weight: 700; }
.photoflow.p1 .pwords li.p1,
.photoflow.p2 .pwords li.p2,
.photoflow.p3 .pwords li.p3{ display: inline-block;}

.photoflow .pphoto{ min-width: 340px; position: relative; border-radius: 15px; border: 3px solid #FFF; filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2)); overflow: hidden; background-color: #464646;}
.photoflow .pphoto::after{content: ''; display: block; padding-top: 100%;}
.photoflow .pphoto li{ background-repeat: no-repeat; background-position: top; background-size: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 0%; z-index: 1; }
.photoflow .pphoto li.pd{ background-image: url(../Images/product/ai/block05b1.png); z-index: 3; height: 100%;}
.photoflow .pphoto li.p1{ background-image: url(../Images/product/ai/block05b2-1.jpg);}
.photoflow .pphoto li.p2{ background-image: url(../Images/product/ai/block05b2-2.jpg);}
.photoflow .pphoto li.p3{ background-image: url(../Images/product/ai/block05b2-3.jpg);}
.photoflow.p1 .pphoto li.p1,
.photoflow.p2 .pphoto li.p2,
.photoflow.p3 .pphoto li.p3{ height: 100%; z-index: 2; transition: 2s;transition-delay: 3s;}


.AI .mainContent > .block::before{width: 100%; position: absolute; left: 0; z-index: -1; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; }
.AI .a2{}
.AI .a2::before { content: ''; padding-top: 69.767%; top: -100px; background-image: url(../Images/product/ai/PageBg2.svg); }

.AI .a3{padding-bottom: 0;}
.AI .a3::before { content: ''; padding-top: 86.705%; bottom: 0; background-image: url(../Images/product/ai/PageBg3.svg); background-position: center bottom!important; }

.AI .a4{}
.AI .a4::before { content: ''; padding-top: 187.5%; top: -900px; background-image: url(../Images/product/ai/PageBg4.svg); }
.a4 .photoflow{ margin-top: var(--pd);}

.AI .a5{}
.AI .a5::before { content: ''; padding-top: 69.767%; top: 0; bottom: 0; background-image: url(../Images/product/ai/PageBg5.svg); background-position: center!important; background-size: cover!important;}
.a5 .photoflow{ margin-top: var(--pd);}
.a5 .photoflow li.f2{ max-width: calc((100% - 120px)/2); display: flex; flex-direction: column; align-items: center;}

.AI .a6{padding-bottom: 0;}
.AI .a6::before { content: ''; padding-top: 140.142%; top: 0; background-image: url(../Images/product/ai/PageBg6.svg); background-position: center top; }
.a6 img.txt{ margin: var(--pd) auto;}
.a6 .photoflow li.f1{ width: 438px; background-position: center; background-repeat: no-repeat; background-size: contain; transition: .6s;}
.a6 .photoflow li.f1::after{ content: ""; display: block; padding-top: 153.881%;}
.a6 .photoflow li.f1:nth-of-type(1){ background-image: url(../Images/product/ai/block06-3a1.png); animation: photoswitchA 15s linear 0s infinite normal;}
.a6 .photoflow li.f1:nth-of-type(3){ background-image: url(../Images/product/ai/block06-3b1.png); animation: photoswitchB 15s linear 0s infinite normal;}
@keyframes photoswitchA{
	0% {background-image: url(../Images/product/ai/block06-3a1.png);}
	15% {background-image: url(../Images/product/ai/block06-3a1.png);}
	20% {background-image: url(../Images/product/ai/block06-3a2.png);}
	35% {background-image: url(../Images/product/ai/block06-3a2.png);}
	40% {background-image: url(../Images/product/ai/block06-3a3.png);}
	55% {background-image: url(../Images/product/ai/block06-3a3.png);}
	60% {background-image: url(../Images/product/ai/block06-3a4.png);}
	75% {background-image: url(../Images/product/ai/block06-3a4.png);}
	80% {background-image: url(../Images/product/ai/block06-3a5.png);}
	95% {background-image: url(../Images/product/ai/block06-3a5.png);}
	100% {background-image: url(../Images/product/ai/block06-3a1.png);}
}
@keyframes photoswitchB{
	0% {background-image: url(../Images/product/ai/block06-3b1.png);}
	15% {background-image: url(../Images/product/ai/block06-3b1.png);}
	20% {background-image: url(../Images/product/ai/block06-3b2.png);}
	35% {background-image: url(../Images/product/ai/block06-3b2.png);}
	40% {background-image: url(../Images/product/ai/block06-3b3.png);}
	55% {background-image: url(../Images/product/ai/block06-3b3.png);}
	60% {background-image: url(../Images/product/ai/block06-3b4.png);}
	75% {background-image: url(../Images/product/ai/block06-3b4.png);}
	80% {background-image: url(../Images/product/ai/block06-3b5.png);}
	95% {background-image: url(../Images/product/ai/block06-3b5.png);}
	100% {background-image: url(../Images/product/ai/block06-3b1.png);}
}

.AI .a7{padding-bottom: 0;}
.AI .a7::before { content: ''; padding-top: 86.705%; bottom: 0; background-image: url(../Images/product/ai/PageBg3.svg); background-position: center bottom; }
.a7 .articalList,
.a8 img.graphic{ margin-top: var(--pd);}
.a7 .articalList ul{ text-align: center;}
.a7 .articalList li.l1{ display: block; width: 170px; border-radius: 50%; margin: 0 auto; background-color: #FFF; background-size: 70%; background-repeat: no-repeat; background-position: center; padding: 0; margin-bottom: 15px;}
.a7 .articalList li.l1::after{content: ''; display: block; padding-top: 100%;}
/*.a7 .articalList li.l2{ margin: calc(var(--fsM)/2) auto;}*/
/*.a7 .articalList ul:last-child li.l2{ margin: 0 auto;}*/
.a7 .articalList li.l3{ max-width: 280px;}

.AI .a8{ font-size: 0;}
.AI .a8::before { content: ''; padding-top: 69.767%; top: -300px; background-image: url(../Images/product/ai/PageBg2.svg); }

.AI .a9{ font-size: 0; padding-bottom: 0;}
.AI .a9::before { content: ''; padding-top: 140.19%; top: -300px; background-image: url(../Images/product/ai/PageBg10.svg); background-position: center top; }
.a9 img{ width: calc(50% - 20px); margin: 0 10px;}

.AI .a10{ font-size: 0;}
/*.AI .a10::before { content: ''; padding-top: 140.19%; top: -200px; background-image: url(../Images/product/ai/PageBg10.svg); background-position: center top; }*/
.a10 img{ max-width: 50%; vertical-align: middle;}

.AI .a11{}
.AI .a11::before { content: ''; padding-top: 107.142%; top: -100px; background-image: url(../Images/product/ai/PageBg11.svg); background-position: center top; }

/* ============== 產品頁-POS ============== */
.pos .tab-list{margin: var(--pd2) 0 var(--pd2);}
.pos .tab-list,
.pos .tab-txt{ display: block; width: 100%; text-align: center; font-size: 0;}
.pos .tab-list a{ font-size: var(--fsP); font-weight: 900; padding: 10px 30px; margin: 5px; border-radius: 10px; transition: .3s;}
.pos .tab-list a:hover,
.pos .t1 .tab-list a.t1,
.pos .t2 .tab-list a.t2,
.pos .t3 .tab-list a.t3,
.pos .t4 .tab-list a.t4,
.pos .t5 .tab-list a.t5,
.pos .t6 .tab-list a.t6,
.pos .t7 .tab-list a.t7{ background-color: var(--sec02); color: #FFF;}

.pos .tab-txt .page{ display: none;}
.pos .t1 .tab-txt .page.t1,
.pos .t2 .tab-txt .page.t2,
.pos .t3 .tab-txt .page.t3,
.pos .t4 .tab-txt .page.t4,
.pos .t5 .tab-txt .page.t5,
.pos .t6 .tab-txt .page.t6,
.pos .t7 .tab-txt .page.t7{ display: flex; justify-content: center; align-items: center;}

.pos .tab-txt .page img{ width: 540px;}
.pos .tab-txt .page .group{ width: 50%; padding-left: var(--pd2);}
.pos .tab-txt .page .group h5.title .note{ margin-top: var(--pdh);}
.pos .tab-txt .page .group h5,
.pos .tab-txt .page .group p{width: 95%; text-align: left;}
.pos .tab-txt .page .group p{ margin-top: 5px; color: var(--sec04); margin-bottom: var(--pd);}
.pos .tab-txt .page .group p.note{ color: #000;}
.pos .tab-txt .page .list{ border-top: 2px solid var(--sec02); padding-top: var(--pd);}
.pos .tab-txt .page .group h5 a{ font-size: var(--fsS); color: #FFF; background-color: var(--sec02); border-radius: 30px; padding: 8px 20px; margin-left: 20px; vertical-align: middle; transition: .3s;}
.pos .tab-txt .page .group h5 a:hover{ background-color: var(--sec03); filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));}

.pos .block.p1{ padding-top: var(--pdh);}
.pos .block.p2{background: linear-gradient(0deg, rgba(235, 230, 220, 0.2) 0%, #FFF 20%, #FFF 80%, rgba(235, 230, 220, 0.2) 100%);}

.pos .block.p3{}
/* .pos .block.p10::after{ z-index: 10;content: ''; width: 100%; height: 2536px; position: absolute; top: 0; left: 0; background-image: url(../Images/product/pos/p3-bg.svg); background-repeat: no-repeat; background-size: 100% auto; background-position: center -150px ; z-index: -1;} */
.pos .block.p10::after{ content: ''; width: 100%; height: 2536px; position: absolute; top:200px ; left: 0; background-image: url(../Images/product/pos/p3-bg.svg); background-repeat: no-repeat; background-size: 100% auto; background-position: top center; z-index: -1;}
.pos .block.p3::after{ content: ''; width: 100%;  position: absolute; top: 0; left: 0; top: -150px; z-index: -1; background-image: url(../Images/bgCurve/kiosk_bgyellow.svg); padding-top: 100%; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.pos .p3 h5{ text-align: center;}
.pos .p3 h5 a{ color:#BE6EA1; text-decoration: underline; transition: .3s; line-height: 1.5;}
.pos .p3 h5 a:hover{ color: var(--sec02);}
.pos .p3 a.viewSpec::after{ content: 'add'; }
.pos .p3 a.viewSpec.off::after{ content: 'remove'; }

/* 營運需求比較表 k4 */
/* .openTable .group{ margin-top: 2rem;position: relative; white-space: nowrap;}
.openTable .mask { overflow:hidden;filter: drop-shadow(0px 2px 3px rgba(225, 165, 205, 0.3));}

.openTable .item li::before{ content: ''; border-bottom: 1px solid #ffffff; }
.openTable .item li.i1::before{ content: '';background-color:var(--sec02);border-bottom: 0px ; } */


/* 為什麼連鎖 p3 */
.pos .p3 .articalList li.l1 img{ width: 175px;padding-bottom: 1.5rem;}
.pos .p3 .articalList ul {  width: calc(100% / 4 - 40px) ;}
.pos .p3 .articalList {margin-bottom: var(--pd);}
.pos .p3 .articalList li.l3{color: var(--com02); }

.viewSpec { cursor: pointer; }

/* POS ai tableSet a11 */
.pos .tableSet { display: none; margin-top: 2rem;text-align: center; width:100%;background-color:#fff;font-size: var(--fsS); margin-bottom: 5rem;border: solid 1px var(--sec02);border-radius: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.pos .tableSet.on { display: block !important; }
.pos .tableSet ul li { padding: 2rem; font-size: var(--fsP); border-bottom: solid 1px var(--sec02);border-right: solid 1px var(--sec02);vertical-align: middle;}

/* 第一欄位的ul li ||||*/
.pos .tableSet ul li:nth-child(1) { width: 20%;background-color:#F2D7E9;border-bottom: solid 1px #FFF;font-weight: 500;}
.pos .tableSet ul li:nth-child(2),
.pos .tableSet ul li:nth-child(3)  { width:40%;}
.pos .tableSet ul li:nth-child(3) {border-right: solid 0px; }

/* 第一列的ul li */
.pos .tableSet ul:nth-child(1) {border-radius: 20px 0 0 20px;}
.pos .tableSet ul:nth-child(1) li {background-color:var(--sec02);border-right: solid 1px #fff;font-weight: 500;}
.pos .tableSet ul:nth-child(1) li:nth-child(3)  {border-right: solid 0px;}
.pos .tableSet ul:nth-child(even) {background-color:#FFF9FD;border-radius: 20px 0 0 20px;}

.pos .tableSet ul:first-child li:first-child {border-top-left-radius: 20px;}
.pos .tableSet ul:first-child li:last-child {border-top-right-radius: 20px;}
.pos .tableSet ul:last-child li:first-child {border-bottom-left-radius: 20px;border-bottom: solid 1px var(--sec02);}
.pos .tableSet ul:last-child li:last-child {border-bottom-right-radius: 20px;}



/* 共用 缐條 */
.flow { position: relative;display: flex;justify-content: space-between; gap: 1rem; margin: 0; padding: 0;}
.flow .item {position: relative; z-index: 1; background-color: #fff; width: calc(100% / 4 - 20px);margin: 10px;vertical-align: top;padding: 3rem; text-align: center;box-shadow: 0px 1px 8px rgba(255, 208, 0, 0.925); border-radius: 20px; }
.flow .item li.l1 {font-size: var(--fsM); font-weight: 700;padding-bottom: 1.5rem;}
.flow .item li.l2 {width: 100%; font-size: var(--fsP);line-height: 1.3;text-align: center;color: var(--com02); }
.flow::before { content: "";position: absolute; top: 50%;left: 50%;width: 80%;height: 1px; background-color: var(--sec03); z-index: 0; transform: translate(-50%, -50%);}
/* POS 資料 p9 */
.pos .p9 p{text-align: center;color: var(--com03);}
.pos .p9 .flow{ margin-bottom:3rem;position: relative;z-index: 1;}
.pos .p9 .btnbox { margin-top: var(--pd);}



.pos .block.p4{}
.pos .block.p5{}
.pos .block.p6{}
.pos .block.p6::after{ content: ''; width: 100%; height: 1600px; position: absolute; top: -350px; left: 0; background-image: url(../Images/product/pos/p6-bg.svg); background-repeat: no-repeat; background-size: 100% auto; background-position: center 0px; z-index: -1; opacity: .5;}
.pos .p6 .container-belt{ display: flex; justify-content: center; align-items: center;}
.pos .p6 img{width: 500px; border-radius: 25px;}
.pos .p6 .group{ padding-left: var(--pd2);}
.pos .p6 .group h5,
.pos .p6 .group p{width: 95%; text-align: left;}
.pos .p6 .group p{ margin-top: 5px; margin-bottom: var(--pd);}
.pos .p6 .list{ border-top: 2px solid #666; padding-top: var(--pd);}
.pos .p6 a.btn{ background-color: var(--sec02); font-size: var(--fsP); font-weight: 600; filter: none;}
.pos .p6 a.btn:hover{background-color: var(--sec03); transform: none; filter: drop-shadow(2px 3px 3px #BBB);}
.pos .block.p7{background: linear-gradient(180deg, #FFF 0%, rgba(235, 230, 220, 1) 100%);}
.pos .block.p8{background: linear-gradient(180deg, #FFF 0%, rgba(235, 230, 220, 1) 100%);}


/* ============== 產品頁-TQG ============== */
.bodybox.tqg{}

.tqg .inPagekv{background-image:url(../Images/product/TQGforecast/banner.jpg);}
.tqg .block{}
.tqg .block::before{ content: ''; display: block; width: 100%; padding-top: 100%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}

.tqg .block.t1{ padding-bottom: 0; z-index: 5;}
.tqg .block.t1 .articalList{}
.tqg .block.t1 .articalList ul{padding: 30px;}
.tqg .block.t1 .articalList li img{ width: 100%; max-width: 250px;}

.tqg .block.t2{ text-align: center;}
.tqg .block.t2::before{ padding-top: 83.125%; top: -120px; background-image:url(../Images/bgCurve/tqg_b1.svg);}

.t2 .chartbox{ display: block; width: 100%; max-width: 1000px; position: relative; margin:0 auto var(--pd);}
.t2 .chartbox .txtbox{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; pointer-events: none;}
.t2 .chartbox .txtbox .txt{ position: absolute; width: 50%; display: inline-block; font-size: var(--fsS); text-align: left; transition: .3s; }
.t2 .chartbox .txtbox .txt.t1{ top: 12.5%; left: 0;}
.t2 .chartbox .txtbox .txt.t2{ top: 19%; right: 0; text-align: right;}
.t2 .chartbox .txtbox .txt.t3{ bottom: 16%; right: 0; text-align: right;}
.t2 .chartbox .txtbox .txt.t4{ bottom: 4%; left: 0;}

.t2 .chartbox .txtbox .txt dt,
.t2 .chartbox .txtbox .txt dd{ display: block;}
.t2 .chartbox .txtbox .txt dt{ padding: 0 0 1rem;}
.t2 .chartbox .txtbox .txt dd{ padding: 1rem 5px; position: relative;}
.t2 .chartbox .txtbox dd::before, 
.t2 .chartbox .txtbox dd::after{ content:""; position: absolute; top: 0; z-index: 2; transition: .3s;}
.t2 .chartbox .txtbox dd::after{ width: 7px; height: 7px; top: -3px; z-index: 1; background-color: var(--sec04); border:1px solid #fff; border-radius: 50%;}
.t2 .chartbox .txtbox dd::before{ width: 100%; height: 0; border-bottom: 2px solid var(--sec04);}
/* before(線）,after(圓點) */
.t2 .chartbox .txtbox .txt.t1 dd::before{ left: 0; width: 70%;}
.t2 .chartbox .txtbox .txt.t2 dd::before{ right: 0;width: 66%;}
.t2 .chartbox .txtbox .txt.t3 dd::before{ right: 0;width: 63%;}
.t2 .chartbox .txtbox .txt.t4 dd::before{ left: 0; width: 72%;}
.t2 .chartbox .txtbox .txt.t1 dd::after{ left: 70%; margin-left: -3px;}
.t2 .chartbox .txtbox .txt.t2 dd::after{ right: 66%; margin-right: -3px;}
.t2 .chartbox .txtbox .txt.t3 dd::after{ right: 63%; margin-right: -3px;}
.t2 .chartbox .txtbox .txt.t4 dd::after{ left: 72%; margin-left: -3px;}

.t2 .chartbox.a1 .txtbox .txt.t1 dd::before{ border-color: #FFC100!important; }
.t2 .chartbox.a2 .txtbox .txt.t2 dd::before{ border-color: #DE83C0!important; }
.t2 .chartbox.a3 .txtbox .txt.t3 dd::before{ border-color: var(--sec04)!important; }
.t2 .chartbox.a4 .txtbox .txt.t4 dd::before{ border-color: #FFA26C!important; }
.t2 .chartbox.a1 .txtbox .txt.t1 dd::after{ background-color: #FFC100; }
.t2 .chartbox.a2 .txtbox .txt.t2 dd::after{ background-color: #DE83C0; }
.t2 .chartbox.a3 .txtbox .txt.t3 dd::after{ background-color: var(--sec04); }
.t2 .chartbox.a4 .txtbox .txt.t4 dd::after{ background-color: #FFA26C; }

/* b(標籤） */
.t2 .chartbox .txtbox .txt dt b{ display: inline-block; background-color: #EEE; border: 1px solid var(--sec04); font-weight: normal; padding: 3px 6px; border-radius: 8px; margin: 0 5px; transition: .3s;}
.t2 .chartbox.a1 .txtbox .txt.t1 dt b{ background-color: var(--sec03); border-color:var(--sec03);}
.t2 .chartbox.a2 .txtbox .txt.t2 dt b{ background-color: var(--sec02); border-color:var(--sec02);}
.t2 .chartbox.a4 .txtbox .txt.t4 dt b{ background-color: var(--sec06); border-color:var(--sec06);}
.t2 .chartbox.a3 .txtbox .txt.t3 dt b{ background-color: var(--sec05); border-color:var(--sec05);}

.t2 .chartbox.a1 .txtbox .txt.t1,
.t2 .chartbox.a2 .txtbox .txt.t2,
.t2 .chartbox.a3 .txtbox .txt.t3,
.t2 .chartbox.a4 .txtbox .txt.t4{ transform: scale(1.05);}

/* 店長績效圖 */
.t2 .chartbox .graphic{ display: block; margin: 0 auto; width: 50%; max-width: 450px; position: relative;}
.t2 .chartbox .graphic::after{ content: ""; display: block; padding-top: 100%; }
.t2 .chartbox .graphic .pic{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-repeat: no-repeat; background-position: center; background-size: 100%; transition: .3s; }
.t2 .chartbox .graphic .pic.c0{ background-image: url(../Images/product/TQGforecast/SMPP0.png); z-index: 6; }
.t2 .chartbox .graphic .pic.c2{ background-image: url(../Images/product/TQGforecast/SMPP2.png); z-index: 5; }
.t2 .chartbox .graphic .pic.c3{ background-image: url(../Images/product/TQGforecast/SMPP3.png); z-index: 4; }
.t2 .chartbox .graphic .pic.c4{ background-image: url(../Images/product/TQGforecast/SMPP4.png); z-index: 3; }
.t2 .chartbox .graphic .pic.c1{ background-image: url(../Images/product/TQGforecast/SMPP1.png); z-index: 2; }
.t2 .chartbox .graphic .pic.c5{ background-image: url(../Images/product/TQGforecast/SMPP2b.png); z-index: 1; }

.t2 .chartbox.a2 .graphic .pic.c2{ background-image: url(../Images/product/TQGforecast/SMPP2_o.png); }
.t2 .chartbox.a3 .graphic .pic.c3{ background-image: url(../Images/product/TQGforecast/SMPP3_o.png); }
.t2 .chartbox.a4 .graphic .pic.c4{ background-image: url(../Images/product/TQGforecast/SMPP4_o.png); }
.t2 .chartbox.a1 .graphic .pic.c1{ background-image: url(../Images/product/TQGforecast/SMPP1_o.png); }
.t2 .chartbox.a2 .graphic .pic.c5{ background-image: url(../Images/product/TQGforecast/SMPP2b_o.png); }

.t2 .chartbox .linkbox{ display: inline-block; position: absolute; width: 100%; height: 100%; z-index: 10; top: 0; left: 0; }
.t2 .chartbox .linkbox a{ display: inline-block; position: absolute; width: 50%; height: 50%; z-index: 10; }
.t2 .chartbox .linkbox a.a1{ top: 0; left: 0; border-radius: 100% 0 0 0; }
.t2 .chartbox .linkbox a.a2{ top: 0; right: 0; border-radius: 0 100% 0 0;}
.t2 .chartbox .linkbox a.a4{ bottom: 0; left: 0; border-radius: 0 0 0 100%;}
.t2 .chartbox .linkbox a.a3{ bottom: 0; right: 0; border-radius: 0 0 100% 0;}

/* 背景線條動畫.aniGraphic from TQG */
.aniGraphic{width: 100%; max-width: 1335px; position: relative;}
.aniGraphic::after{ content: ""; display: block; }
.aniGraphic .icon,
.aniGraphic .icon2{ width: 100%; display: flex; position: absolute; top: 0; left: 0; z-index: 5;}
.aniGraphic .icon .item,
.aniGraphic .icon2 .item{ position: relative;}
.aniGraphic .aniBg,
.aniGraphic .aniAw{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.aniGraphic .aniBg svg,
.aniGraphic .aniAw svg{ object-fit: contain; object-position: center;}
.aniGraphic .aniBg path {
	fill: none;
	stroke: #E1A5CD;
	stroke-width: 3;
	stroke-dashoffset: 3000;
	stroke-dasharray: 3000;
}

.tqg .block.t3{ text-align: center; z-index: 4; background-color: #FFF;}
.tqg .block.t3 .group{ display: block; width: 100%; font-size: 0; margin-bottom: var(--pd); }
.tqg .block.t3 .txt,
.tqg .block.t3 .pic{ width: 50%; position: relative; display: inline-block; vertical-align: middle;}
.tqg .block.t3 .txt { }
.tqg .block.t3 .txt dl{ display: inline-block; width: 100%; opacity: 0; transition: .5s; position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding-right: var(--pd2); text-align: left;}
.tqg .block.t3 .txt dt{ font-size: var(--fsM2); font-weight: 900;}
.tqg .block.t3 .txt dd{ width: 100%; font-size: var(--fsP); position: relative; margin-top: var(--pdh);}
.tqg .block.t3 .txt dd.s2{ padding-left: var(--fsL);}
.tqg .block.t3 .txt dd.s2::before{ content: "done"; color: var(--pri01); position: absolute; font-size: var(--fsL); top: -3px; left: 0; font-weight: 900; }
.tqg .block.t3 .txt dd img{ border-radius: 15px;}

.tqg .block.t3 .q1 .q1,
.tqg .block.t3 .q2 .q2,
.tqg .block.t3 .q3 .q3,
.tqg .block.t3 .q4 .q4,
.tqg .block.t3 .q5 .q5,
.tqg .block.t3 .q6 .q6{ opacity: 1;}

.tqg .block.t3 .aniGraphic{max-width: 660px; }
.tqg .block.t3 .aniGraphic::after{ padding-top: 100%;}
.tqg .block.t3 .aniGraphic .icon,
.tqg .block.t3 .aniGraphic .icon2{ flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.tqg .block.t3 .aniGraphic .icon .item,
.tqg .block.t3 .aniGraphic .icon2 .item{ font-size: 0; width: calc(100%/3 - 2rem); background-size: contain; background-position: center; background-repeat: no-repeat; transition: .3s; margin: 1rem auto;}
.tqg .block.t3 .aniGraphic .icon .item:hover{ font-size: var(--fsS)!important; transform: scale(1.05); filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));}
.tqg .block.t3 .aniGraphic .icon .item::after,
.tqg .block.t3 .aniGraphic .icon2 .item::after{ content: ""; display: block; padding-top: 100%;}
.tqg .block.t3 .aniGraphic .icon .item span,
.tqg .block.t3 .aniGraphic .icon2 .item span{ width: 100%; text-align: center; font-weight: 900; position: absolute; bottom: 3.5rem; transform: translateY(50%); left: 0; z-index: 3; }
.tqg .block.t3 .aniGraphic .icon .item i.pic {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.tqg .block.t3 .aniGraphic .icon .item i.pic::before,
.tqg .block.t3 .aniGraphic .icon .item i.pic::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat;}
.tqg .block.t3 .aniGraphic .icon .item i.pic::before{ z-index: 1;}
.tqg .block.t3 .aniGraphic .icon .item:hover i.pic::before{ opacity: 1!important;}

.tqg .block.t3 .aniGraphic .icon .item.a1 i.pic::after{  background-image: url(../Images/product/TQGforecast/p3-1.png); }
.tqg .block.t3 .aniGraphic .icon .item.a1 { font-size: var(--fsS); }
.tqg .block.t3 .aniGraphic .icon .item.a2 { animation: iconAni_a2_text 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a2 i.pic::after { background-image: url(../Images/product/TQGforecast/p3-2a.png); }
.tqg .block.t3 .aniGraphic .icon .item.a2 i.pic::before { background-image: url(../Images/product/TQGforecast/p3-2.png); opacity: 0; animation: iconAni_a2_image 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a3 { animation: iconAni_a3_text 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a3 i.pic::after { background-image: url(../Images/product/TQGforecast/p3-3a.png); }
.tqg .block.t3 .aniGraphic .icon .item.a3 i.pic::before { background-image: url(../Images/product/TQGforecast/p3-3.png); opacity: 0; animation: iconAni_a3_image 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a4 { animation: iconAni_a4_text 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a4 i.pic::after { background-image: url(../Images/product/TQGforecast/p3-4a.png); }
.tqg .block.t3 .aniGraphic .icon .item.a4 i.pic::before { background-image: url(../Images/product/TQGforecast/p3-4.png); opacity: 0; animation: iconAni_a4_image 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a5 { animation: iconAni_a5_text 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a5 i.pic::after { background-image: url(../Images/product/TQGforecast/p3-5a.png); }
.tqg .block.t3 .aniGraphic .icon .item.a5 i.pic::before { background-image: url(../Images/product/TQGforecast/p3-5.png); opacity: 0; animation: iconAni_a5_image 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a6 { animation: iconAni_a6_text 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a6 i.pic::after { background-image: url(../Images/product/TQGforecast/p3-6a.png); }
.tqg .block.t3 .aniGraphic .icon .item.a6 i.pic::before { background-image: url(../Images/product/TQGforecast/p3-6.png); opacity: 0; animation: iconAni_a6_image 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a7 { animation: iconAni_a7_text 20s linear infinite; }
.tqg .block.t3 .aniGraphic .icon .item.a7 i.pic::after { background-image: url(../Images/product/TQGforecast/p3-7a.png); }
.tqg .block.t3 .aniGraphic .icon .item.a7 i.pic::before { background-image: url(../Images/product/TQGforecast/p3-7.png); opacity: 0; animation: iconAni_a7_image 20s linear infinite;}

/* 增加一層手機版用 */
.tqg .block.t3 .aniGraphic .icon2{z-index: 6; pointer-events: none;}
.tqg .block.t3 .aniGraphic .icon2 .item{ font-size: var(--fsS); transform: scale(1.03); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0; transition: none;}
.tqg .block.t3 .aniGraphic .icon2 .item.a1{  background-image: url(../Images/product/TQGforecast/p3-1.png); }
.tqg .block.t3 .aniGraphic .icon2 .item.a2{  background-image: url(../Images/product/TQGforecast/p3-2.png); }
.tqg .block.t3 .aniGraphic .icon2 .item.a3{  background-image: url(../Images/product/TQGforecast/p3-3.png); }
.tqg .block.t3 .aniGraphic .icon2 .item.a4{  background-image: url(../Images/product/TQGforecast/p3-4.png); }
.tqg .block.t3 .aniGraphic .icon2 .item.a5{  background-image: url(../Images/product/TQGforecast/p3-5.png); }
.tqg .block.t3 .aniGraphic .icon2 .item.a6{  background-image: url(../Images/product/TQGforecast/p3-6.png); }
.tqg .block.t3 .aniGraphic .icon2 .item.a7{  background-image: url(../Images/product/TQGforecast/p3-7.png); }


/* 動畫: 文字 + 圖片透明度 */
@keyframes iconAni_a2_text { 
	4% { font-size: 0; } 
	7% { font-size: var(--fsS); } 
	31% { font-size: var(--fsS); } 
	33.33% { font-size: 0; } 
	100% { font-size: 0; }}
@keyframes iconAni_a2_image { 
	4% { opacity: 0; } 
	7% { opacity: 1; } 
	31% { opacity: 1; } 
	33.33% { opacity: 0; } 
	100% { opacity: 0; }}
@keyframes iconAni_a3_text { 
	35% { font-size: 0; } 
	38% { font-size: var(--fsS); } 
	64% { font-size: var(--fsS); } 
	66.66% { font-size: 0; } 
	100% { font-size: 0; }}
@keyframes iconAni_a3_image { 
	35% { opacity: 0; } 
	38% { opacity: 1; } 
	64% { opacity: 1; } 
	66.66% { opacity: 0; } 
	100% { opacity: 0; }}
@keyframes iconAni_a4_text { 
	70% { font-size: 0; } 
	73% { font-size: var(--fsS); } 
	98% { font-size: var(--fsS); } 
	100% { font-size: 0; }}
@keyframes iconAni_a4_image { 
	70% { opacity: 0; } 
	73% { opacity: 1; } 
	98% { opacity: 1; } 
	100% { opacity: 0; }}
@keyframes iconAni_a5_text { 
	6% { font-size: 0; } 
	9% { font-size: var(--fsS); } 
	31% { font-size: var(--fsS); } 
	33.33% { font-size: 0; } 
	100% { font-size: 0; }}
@keyframes iconAni_a5_image { 
	6% { opacity: 0; } 
	9% { opacity: 1; } 
	31% { opacity: 1; } 
	33.33% { opacity: 0; } 
	100% { opacity: 0; }}
@keyframes iconAni_a6_text { 
	8% { font-size: 0; } 
	11% { font-size: var(--fsS); } 
	31% { font-size: var(--fsS); } 
	33.33% { font-size: 0; } 
	37% { font-size: 0; } 
	40% { font-size: var(--fsS); } 
	64% { font-size: var(--fsS); } 
	66.66% { font-size: 0; } 
	100% { font-size: 0; }}
@keyframes iconAni_a6_image { 
	8% { opacity: 0; } 
	11% { opacity: 1; } 
	31% { opacity: 1; } 
	33.33% { opacity: 0; } 
	37% { opacity: 0; } 
	40% { opacity: 1; } 
	64% { opacity: 1; } 
	66.66% { opacity: 0; } 
	100% { opacity: 0; }}
@keyframes iconAni_a7_text { 
	10% { font-size: 0; } 
	12% { font-size: var(--fsS); } 
	31% { font-size: var(--fsS); } 
	33.33% { font-size: 0; } 
	40% { font-size: 0; } 
	42% { font-size: var(--fsS); } 
	64% { font-size: var(--fsS); } 
	66.66% { font-size: 0; } 
	73% { font-size: 0; } 
	75% { font-size: var(--fsS); } 
	99% { font-size: var(--fsS); } 
	100% { font-size: 0; }}
@keyframes iconAni_a7_image { 
	10% { opacity: 0; } 
	12% { opacity: 1; } 
	31% { opacity: 1; } 
	33.33% { opacity: 0; } 
	40% { opacity: 0; } 
	42% { opacity: 1; } 
	64% { opacity: 1; } 
	66.66% { opacity: 0; } 
	73% { opacity: 0; }
	75% { opacity: 1; }
	99% { opacity: 1; }
	100% { opacity: 0; }}

.tqg .block.t3 .aniGraphic .aniBg{ transform: scale(.9) translateY(-1rem); }
.tqg .block.t3 svg path {stroke: var(--sec03); }
.tqg .block.t3 svg path.st1 {animation: animate-st1 20s linear infinite;}
.tqg .block.t3 svg path.st2 {animation: animate-st2 20s linear infinite;}
.tqg .block.t3 svg path.st3 {animation: animate-st3 20s linear infinite;}

@keyframes animate-st1 {
	0% { stroke-dashoffset: 3000; }
	33.33% { stroke-dashoffset: 0; }
	33.34% { stroke-dashoffset: 3000; }
	100% { stroke-dashoffset: 3000; }
}
@keyframes animate-st2 {
	0% { stroke-dashoffset: 3000; }
	33.33% { stroke-dashoffset: 3000; } /* 在10秒時，準備開始繪製 */
	66.66% { stroke-dashoffset: 0; } /* 在20秒時，繪製完成 */
	66.67% { stroke-dashoffset: 3000; }
	100% { stroke-dashoffset: 3000; }
}
@keyframes animate-st3 {
	0% { stroke-dashoffset: 3000; }
	66.66% { stroke-dashoffset: 3000; } /* 在20秒時，準備開始繪製 */
	99.99% { stroke-dashoffset: 0; } /* 在接近30秒時，繪製完成 */
	100% { stroke-dashoffset: 3000; }
}

.tqg .block.t4{ z-index: 4; }
.tqg .block.t4::before{ padding-top: 53.309%; background-image:url(../Images/bgCurve/tqg_b3.svg);}
.tqg .block.t4 .group{ width: 100%; padding-top: var(--pd); text-align: center;}

.tqg .block.t4 .aniGraphic{max-width: 1335px; }
.tqg .block.t4 .aniGraphic::after{ padding-top: 25.843%;}
.tqg .block.t4 .aniGraphic .icon .item{ font-size: var(--fsS); width: calc(100%/5); transform: scale(.95); filter: grayscale(0); background-size: contain; background-position: center; background-repeat: no-repeat;  transform: translateZ(0); -webkit-transform: translateZ(0);}
.tqg .block.t4 .aniGraphic .icon .item::after{content: ""; display: block; padding-top: 116.863%;}
.tqg .block.t4 .aniGraphic .icon .item .txt{ color: #333; width: calc(100% - 4rem); padding: 0 2rem; text-align: center; font-weight: 900; position: absolute; top: calc(50% - 3rem); left: 2rem; }
.tqg .block.t4 .aniGraphic .icon .item .txt b{ display: block; font-size: 1.6em; margin-bottom: 1rem; }
.tqg .block.t4 .aniGraphic .icon .item.c1{ background-image: url(../Images/product/TQGforecast/p4-1.png); }
.tqg .block.t4 .aniGraphic .icon .item.c2{ background-image: url(../Images/product/TQGforecast/p4-2.png); }
.tqg .block.t4 .aniGraphic .icon .item.c3{ background-image: url(../Images/product/TQGforecast/p4-3.png); }
.tqg .block.t4 .aniGraphic .icon .item.c4{ background-image: url(../Images/product/TQGforecast/p4-4.png); }
.tqg .block.t4 .aniGraphic .icon .item.c5{ background-image: url(../Images/product/TQGforecast/p4-5.png); }
.tqg .block.t4 .aniGraphic .icon .item.c6{ background-image: url(../Images/product/TQGforecast/p4-4.png); }

.tqg .ag2 .block.t4 .aniGraphic .icon .item.c1{animation: iconAni_c1 10s linear 1;}
.tqg .ag2 .block.t4 .aniGraphic .icon .item.c2{animation: iconAni_c2 10s linear 1;}
.tqg .ag2 .block.t4 .aniGraphic .icon .item.c3{animation: iconAni_c3 10s linear 1;}
.tqg .ag2 .block.t4 .aniGraphic .icon .item.c4{animation: iconAni_c4 10s linear 1;}
.tqg .ag2 .block.t4 .aniGraphic .icon .item.c5{animation: iconAni_c5 10s linear 1;}
.tqg .ag2 .block.t4 .aniGraphic .icon .item.c6{animation: iconAni_c4 10s linear 1;}


@keyframes iconAni_c1 {
	0% { filter: grayscale(1); transform: scale(.95);}
	4% { filter: grayscale(0); transform: scale(1);}
}
@keyframes iconAni_c2 {
	0% { filter: grayscale(1); transform: scale(.95);}
	4% { filter: grayscale(1); transform: scale(.95);}
	8% { filter: grayscale(0); transform: scale(1);}
}
@keyframes iconAni_c3 {
	0% { filter: grayscale(1); transform: scale(.95);}
	8% { filter: grayscale(1); transform: scale(.95);}
	12% { filter: grayscale(0); transform: scale(1);}
}
@keyframes iconAni_c4 {
	0% { filter: grayscale(1); transform: scale(.95);}
	12% { filter: grayscale(1); transform: scale(.95);}
	14% { filter: grayscale(0); transform: scale(1);}
}
@keyframes iconAni_c5 {
	0% { filter: grayscale(1); transform: scale(.95);}
	16% { filter: grayscale(1); transform: scale(.95);}
	20% { filter: grayscale(0); transform: scale(1);}
}

/* .t4 線條與箭頭動畫 */
.tqg .block.t4 svg .st0 {
	stroke: var(--sec02);
}
.tqg .ag2 .block.t4 svg .st0 {
	animation: circle-draw 10s linear infinite;
}
@keyframes circle-draw {
	50% {stroke-dashoffset: 0;}
	100% {stroke-dashoffset: -3000;}
}
.tqg .block.t4 svg #arrow {
	offset-path: path("M127,159h1082c5.5,0,10,4.5,10,10v163c0,5.5-4.5,10-10,10H127c-5.5,0-10-4.5-10-10V169");
	offset-rotate: auto;
	transform: translateY(-10px);
}
.tqg .ag2 .block.t4 svg #arrow {
	animation: move-along 10s linear infinite;
}
@keyframes move-along {
	0% {offset-distance: 0%;}
	42.5% {offset-distance: 100%;}
	100% {offset-distance: 100%;}
}



.tqg .block.t4 a.btn{ margin-top: var(--pd);}

.tqg .block.t5{ z-index: 4; }
.tqg .block.t5::before{ padding-top: 53.177%; background-image:url(../Images/bgCurve/tqg_b4.svg);}
.tqg .block.t5 .btnbox{ margin-top: var(--pd);}

.tqg .block.t6{ z-index: 5; }
.tqg .block.t6::before{ padding-top: 53.309%; background-image:url(../Images/bgCurve/tqg_b3.svg);}
.tqg .block.t7{ z-index: 6; }
.tqg .block.t7::before{ padding-top: 45.208%; background-image:url(../Images/bgCurve/tqg_b7.svg);}
.tqg .block.t8{ z-index: 7; }
.tqg .block.t8::before{ padding-top: 69.948%; top: -60px; background-image:url(../Images/bgCurve/tqg_b8.svg);}

.tqg .consultBanner{background-image:url(../Images/product/TQGforecast/consult_banner.jpg);}

/* ============== 關於我們 about ============== */
.bodybox.about .inPagekv{background-image:url(../Images/about/banner.jpg);}

/* 背景 */
.about .block{background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.about .block::before{ content: ''; display: block; width: 100%; padding-top: 30%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.about .block.a2a{z-index: 10;}
.about .block.a3{z-index: 9;}
.about .block.a3::before {top: -120px; padding-top: 100%; background-image: url(../Images/bgCurve/about_yellowshadow.svg);}
.about .block.a4{z-index: 10;}
.about .block.a4::before {top: -150px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.about .block.a5{z-index: 7;}
.about .block.a5::before{ top: -120px;  padding-top: 100%; background-image: url(../Images/bgCurve/about_yellowshadow.svg);}
.about .block.a6{z-index: 10;}
.about .block.a6::before{ top: -150px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.about .block.a7{z-index: 7;}
.about .block.a7::before{ top: -150px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.about .block.a8{z-index: 4;}
.about .block.a8::before{ top: -150px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.about .block.a9{z-index: 6;}
.about .block.a9::before {height: 50%; top: -150px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.about .block.a10{z-index: 5;}
.about .block.a10::before {height: 50%; top: -150px; background-image: url(../Images/bgCurve/kiosk_bgwhiteshadow.svg);}
.about .block.a11{z-index: 1;}

/* 公司概要 tableSet a11 */
.about .tableSet { width:100%;background-color:#fff;font-size: var(--fsS); margin-bottom: 5rem;border: solid 1px var(--sec02);border-radius: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.about .tableSet ul li:nth-child(1) { width: 20%;vertical-align: middle;background-color:#F2D7E9;border-bottom: solid 1px #FFF;text-align: center;font-weight: 500;}
.about .tableSet ul:nth-child(even) {background-color:#FFF9FD;border-radius: 20px 0 0 20px;}
.about .tableSet ul li { padding: 2rem; font-size: var(--fsP); border-bottom: solid 1px var(--sec02);vertical-align: middle;}

.about .tableSet ul:first-child li:first-child {border-top-left-radius: 20px;}
.about .tableSet ul:first-child li:last-child {border-top-right-radius: 20px;}
.about .tableSet ul:last-child li:first-child {border-bottom-left-radius: 20px;border-bottom: solid 1px var(--sec02);}
.about .tableSet ul:last-child li:last-child {border-bottom-right-radius: 20px;}

/* a1 */
.about .a1 .wd{ display: inline-block; font-size: var(--fsXL);padding: 4rem 3rem; position: absolute;}
.about .a1 .wd dt{ font-weight: 600; display: block; text-align: left;}
.about .a1 .wd dt b{ font-size: var(--fsXL2);}
.about .a1 img{ margin-top: 3rem;}

/* a2 mapbox */
.bodybox.about .block.a2 { padding: var(--pd)  0 0 0; }
.bodybox.about .block.a2a { padding: 0 0 var(--pd3) 0; }

.about .mapbox h2.title,
.about .mapbox span{padding: 0 var(--pdh);}
.about .mapbox {padding-top: 120px;} 
.about .map { transform: translate(-0px, -8px);} 
.about .mapbox h2.title{margin-top: -120px; padding: 0 var(--pd);} 
.about .block.a2 > .container-belt {  padding: 0; }

/* a3 */
.about .a3 .strategy{ position: relative; background-image: url(../Images/About/a3.png); background-position: center; background-size: contain; background-repeat: no-repeat;}
.about .a3 .strategy .bg{ width: 100%; display: block;  padding-top: 46.268%; }
.about .a3 .item { position: absolute;transition: .3s; width:340px; display: flex;justify-content: flex-start; align-items: center; } 
.about .a3 .item.i1 { top: 20%; left: 0%; text-align: right;flex-direction: row-reverse;}
.about .a3 .item.i2 { top: 50%; left: 0%; text-align: right;flex-direction: row-reverse;}
.about .a3 .item.i3 { top: 10%; right: 0%;}
.about .a3 .item.i4 { top: 37%; right: 0%;}
.about .a3 .item.i5 { bottom: 10%; right: 0%;}

.about .a3 .item.i1:hover,
.about .a3 .item.i2:hover{ transform: scale(1.03) translateX(-5%);}
.about .a3 .item:hover { transform: scale(1.03) translateX(5%);}
.about .a3 .item b.icon { width: 120px; height: 120px;background-size: contain; background-position: center;background-repeat: no-repeat; margin:1rem 1.5rem;}
.about .a3 .item i.title{font-style: normal;width: 100%;font-size: var(--fsM);font-weight: 500;display:block; }
.about .a3 .item i.name{font-style: normal;width: 100%;font-size: var(--fsP);display: block;color: var(--com02);}
.about .a3 img { margin: 0 auto; display: block;}

/* a9 */
.about .block.a9 a.btn{text-align: center; display: block; margin: 0 auto; width: fit-content;margin-top: 4rem;}

/* 影片 */
.ytmovie {position: relative;display: inline-block;width: 100%; overflow: hidden;border-radius: 20px;}
.ytmovie::after {content: "";display: block; padding-top: 56.25%;}
.ytmovie iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.bodybox.about .consultBanner{ background-image:url(../Images/About/consult_banner.jpg);}

.txt-pic{width: 100%; display: flex; align-items: center;justify-content: space-between; font-size: 0; }
.txt-pic .title{text-align: left;margin-bottom: 0;}
.txt-pic img{ width:50%;border-radius: 20px;}
.about .a7 .txt-pic img{ margin: 0 0 0 5rem;}
.about .a7 h2.title+span{text-align: left;} 

/* sustainable box a8*/
.sustainable {position: relative; width: 100%; height: 500px; margin:7rem 0 0 0;}
.sustainable::after {content: ""; top: 0; left: 0;width: 100%;height: 100%; position: absolute; background-image: url(../Images/About/sus_bg.png); background-position: center; background-size: contain; background-repeat: no-repeat;}
.sustainable .txtbox .txt { width: 35% ;pointer-events: auto;}
.sustainable .txtbox dl { white-space: nowrap;z-index: 1;}
.sustainable .txt dt { padding: 0 0 1.5rem;}
.sustainable .txt dt b{display: block;font-size: var(--fsL);}
.sustainable .txt dt span{font-size: var(--fsM);}

.sustainable .txt dt{position: relative;display: block;}
.sustainable .txt dt::before{content: ''; width: 100%; height: 100%; position: absolute;background-repeat: no-repeat;}
.sustainable .txt.orange dt::before{background-image: url(../Images/About/line_orange.svg);background-position: right; }
.sustainable .txt.purple dt::before{background-image: url(../Images/About/line_purple.svg);}
.sustainable .txt.blue dt::before{background-image: url(../Images/About/line_blue.svg);}

.sustainable .txt.orange dt::before{ width: 115%; left: -30px; transform: translateY(35%);} 
.sustainable .txt.purple dt::before{ width: 115%; left: -50px; transform: translateY(95%);} 
.sustainable .txt.blue dt::before{ width: 115%; left: -50px; transform: translateY(70%);} 

.sustainable .txt.orange dt b{color: #e88c00;}
.sustainable .txt.purple dt b{color: #C36CF6;}
.sustainable .txt.blue dt b{color: #6477FD;}

.sustainable.a1 .txtbox .txt.orange {position: absolute; top: 25%;left: 0;z-index:4;}
.sustainable.a2 .txtbox .txt.purple { position: absolute; top: 0; right: 0;z-index:6;}
.sustainable.a3 .txtbox .txt.blue {position: absolute; top: 53%; right: 0;z-index:5;}

.sustainable .txtbox .txt.orange {position: absolute; top: 25%; left: 0;}
.sustainable .txtbox .txt.purple { position: absolute; top: 0%; right: 0;}
.sustainable .txtbox .txt.blue {position: absolute; top: 53%; right: 0; }

.sustainable .txt dd{position: relative;display: block;font-size: var(--fsP);font-weight: 300; padding-left: 30px; }
.sustainable .txt dd::before{ content: '';position: absolute; width: 6px; height: 6px; background-color: var(--com02); border-radius: 50%; top: calc(var(--fsP)/2); left: 7px;}
.sustainable .txt dd:first-of-type{margin-top: 1.5rem;}

.sustainable .txtbox {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; pointer-events: none;}
.sustainable .txtbox .txt {position: absolute; display: inline-block;}

.sustainable .txtbox dd{ display: none;}
.sustainable.a1 .txtbox .txt.orange dd,
.sustainable.a2 .txtbox .txt.purple dd,
.sustainable.a3 .txtbox .txt.blue dd{display: block;}

/* .sustainable .chart.pc {position: absolute; width: 100%; height: 500px; pointer-events: none;background-image: url(../Images/About/a8.png);background-position: center; background-size: auto 100%; background-repeat: no-repeat;}*/
.sustainable .chart.mobile{ top: 0;left: 0; z-index: -1; transform: translateX(-19%);position: absolute; width: 100%; height:100%; background-image: url(../Images/About/a8-m.png);background-position: center; background-size: auto 110%; background-repeat: no-repeat;} 
	
.sustainable .graphic{ display: block; margin: 0 auto; width: 50%; max-width: 450px; position: relative;}
.sustainable .graphic::after{ content: ""; display: block; padding-top: 100%; }
.sustainable .graphic .pic{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-repeat: no-repeat; background-position: center; background-size: 100%; transition: .3s; }
.sustainable .graphic .pic.p0{ background-image: url(../Images/about/sustitle.png); z-index: 6; }
.sustainable .graphic .pic.p1{ background-image: url(../Images/about/susorange.png); z-index: 5; }
.sustainable .graphic .pic.p2{ background-image: url(../Images/about/suspurple.png); z-index: 4; }
.sustainable .graphic .pic.p3{ background-image: url(../Images/about/susblue.png); z-index: 3; }

.sustainable.a1 .graphic .pic.p1{ background-image: url(../Images/about/susorange_o.png); }
.sustainable.a2 .graphic .pic.p2{ background-image: url(../Images/about/suspurple_o.png); }
.sustainable.a3 .graphic .pic.p3{ background-image: url(../Images/about/susblue_o.png); }

.sustainable .linkbox{ display: inline-block; position: absolute; width: 100%; height: 100%; z-index: 10; top: 0; left: 0;}
.sustainable .linkbox a{ display: inline-block; position: absolute; width: 73%; height: 38%; z-index: 10; }
.sustainable .linkbox a.a1{ bottom: 27%; left: -20%; border-radius: 0 0 200px 200px ; transform: rotate(90deg);}/* background-color: rgba(0, 0, 0, 0.5);  */
.sustainable .linkbox a.a2{ top: 0; right: 0; border-radius: 200px 200px 0 0 ; transform: rotate(35deg);}
.sustainable .linkbox a.a3{ bottom: 5%; right: -7%; border-radius: 0 0 200px 200px; transform: rotate(-35deg);}
.sustainable .linkbox a::after{ width: 400px; height: 60%; position: absolute; }
.sustainable .linkbox a.a1::after{content: ""; top: 325px; right: 30px; transform: rotate(90deg); }
.sustainable .linkbox a.a2::after{content: ""; top: -165px; right: -265px; transform: rotate(-35deg); }
.sustainable .linkbox a.a3::after{content: ""; top: 182px; right: -292px; transform: rotate(35deg); }


/* .about .block{ padding-bottom: var(--pd2);}
.about .a1.bg-shape::before{ right: -20%;}
.about .a1.bg-shape::after{ left: -30%; bottom: -30%;}
.about .a2{ background-image: url(../Images/About/about01_bg.png); background-repeat: no-repeat; background-position: center top; background-size: auto 100%; height: 943px; padding-top: 100px;}
.about .a2 .container-belt{ height: 843px;}
.about .a2 .years,
.about .a2 .years .lines{ display: flex; flex-direction: column;}
.about .a2 .years{ position: absolute; top: 0; left: var(--pd); height: calc(100% - 100px);}
.about .a2 .years h1,
.about .a2 .years h2{ margin-bottom: 32px;}
.about .a2 .years .lines{ border-left: 1px solid #000; width: 100px; height: calc(100%);}
.about .a2 .years .lines li{position: relative; font-size: 20px; line-height: 20px; margin-top: -10px; margin-bottom: 40px; padding-left: 10px; font-family: "Roboto", sans-serif; font-weight: 300; cursor: pointer;}
.about .a2 .years .lines li::before{content: ''; width: 5px; height: 0px; border-top: 1px solid #000; position: absolute; top: 10px; left: 0px;}
.about .a2 .years .lines li.focus{ font-size: 26px; color: #FFF; font-weight: 700;}
.about .a2 .milestone{ padding: 100px 0 0 100px;}
.about .a2 .milestone .item{ display: none; color: #FFF; background-color: rgba(0,0,0, .3); padding: 20px 40px; border-radius: 25px;}
.about .a2 .milestone .item.focus{ display: inline-block;}
.about .a2 .milestone .item h3{ font-weight: 900; margin-bottom: 10px;}
.about .a2 .milestone .item dl{}
.about .a2 .milestone .item dd{font-size:var(--fsP); line-height: 1.5; padding-left:10px; position:relative; display:block;}
.about .a2 .milestone .item dd::before{content: " "; width: 10px; height: 10px; border-radius: 99px; background-color: #FFF; margin: 0px 0 0 -15px; position: absolute; top:5px; left:0;}

.about .a3{ position:relative; z-index: 2; padding-top: var(--pd2);}
.about .a3 .container-belt{ display: flex; justify-content: space-between; align-items: center;}
.about .a3 .group{ padding-left: var(--pd2);}
.about .a3 h5.title{ text-align: right;}

.about .a4{position:relative; z-index: 1; margin-top: -300px;} */
/*
.about .a4 p{position:absolute; bottom: 600px; right: 530px; font-size: var(--fsM);}
.about .a4.bg-shape::before{right:0;}
.about .a4.bg-shape::after{left:-200px; bottom:300px;}
*/

/* .about .a5{position:relative; z-index: 3; margin-top:-200px;}
.about .a5 .container{text-align: right; display: flex; justify-content: flex-end; align-items: center;}
.about .a5.bg-shape.G02::before{content: " "; width: 4000px; height: 980px; background-size: 50%; background-position: center; top:-200px; left: -40%; z-index: 0;}
.about .a5.bg-shape::after{display:none;}
.about .a5 .txt{font-size: 45px; font-weight:600; margin-right:100px;}
.about .a5 ul{display:flex;}
.about .a5 li{text-align:center; max-height:195px; width:300px; height:200px; max-width:280px; margin:0 10px;}
.about .a5 li b{background-color:#FFF; display:block; border-radius:10px;padding:25px 0; margin-bottom:10px;}
.about .a5 li span{text-align:left; display:block; font-size: var(--fsS);}

.about .a6{position:relative; z-index: 4;} */

/* ============== 新聞列表 news ============== */
.about.news{}
/* about */
.bodybox.news .inPagekv{background-image:url(../Images/About/case-banner2.jpg); background-position:center;}
.about.news .aboutBox{width: 100%; margin:var(--pd) auto 0; padding: 0 var(--pd);}

.about.news .aboutNews{}
.about.news .aboutNews .mainList{display:flex; justify-content:space-between;}
.about.news .mainList{}
.about.news .mainList .item{width:calc((100% - var(--pd))/3); max-width: 400px; position: relative;}
.about.news .mainList .item dl{ width: 100%;}
.about.news .mainList .item dt{-webkit-mask: url(../Images/news_pic_mask.svg) no-repeat; mask: url(../Images/news_pic_mask.svg) no-repeat;}
.about.news .mainList .item dt img{ width: 100%; height: 100%; object-fit: cover; position: absolute; transition: .3s;}
.about.news .mainList .item dt{width:100%; position:relative;}
.about.news .mainList .item dt::after{ content: ''; display: block; padding-top: 67.885%;}
.about.news .mainList .item::before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(../Images/news_pic_arrow.svg); transition: .3s; background-repeat: no-repeat; pointer-events: none;}
.about.news .mainList .item:hover::before{ background-image: url(../Images/news_pic_arrow_hover.svg);}
.about.news .mainList .item:hover dt img{ transform: scale(1.05);}

.about.news .mainList dd.n1{font-size:20px; font-weight:600; margin-top: 15px; color: #000;}
.about.news .mainList dd.n2{background-image:var(--gradient11); background-clip: text; color: transparent; margin:8px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis; font-size:30px; line-height:35px; max-height:70px;}
.about.news .mainList dd.n3{font-size:18px; font-weight:normal; color:#888;}

.about.news .listBox{display:flex; flex-wrap:wrap; justify-content:space-between; margin:var(--pd) 0 0;}
.about.news .listBox a.item{width:calc((100% - var(--pd))/2); margin-bottom:var(--pd);}
.about.news .listBox ul{width:100%; font-size: 0;}
.about.news .listBox li{color:#333; vertical-align: middle;}
.about.news .listBox li.pic{ width:180px; border-radius:25px; background-image: url(../Images/logoWordW.svg); background-color: #CCC; background-repeat:no-repeat; background-position:center; background-size:cover;}
.about.news .listBox li.pic::after{ content: ''; display: block; padding-top: 75%;}
.about.news .listBox li.word{margin-left:15px; width:calc(100% - 180px - 15px);}
.about.news .listBox b{display:block; font-size:26px; font-weight:500; line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; text-overflow: ellipsis; transition: .3s; margin-bottom: 5px; }
.about.news .listBox span{font-size:var(--fsS); color: #888; font-weight:normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; transition: .3s;}
.about.news .listBox a:hover b{color:var(--pri04);}
.about.news .listBox a:hover span{color:#333;}

/* 內頁 */
/*.newsPage.inPage .mainTop .pic::after{background-image:var(--gradient06);}*/
.about.newsPage{}
.about.newsPage .aboutIn{margin:var(--pd2) auto; font-size:var(--fsS); padding: 0 var(--pd);}
.about.newsPage .title{width: 100%; margin-bottom: var(--pd);}
.about.newsPage .title li{ width: 100%; text-align: center;}
.about.newsPage .title .t1{font-size:30px; font-weight:800;}
.about.newsPage .title .t2{font-size:var(--fsS); font-weight:400;}
.about.newsPage .title a{color:var(--pri03);}
.about.newsPage .title a:hover{color:var(--pri01);}
.about.newsPage .btnbox{ margin-top: var(--pd);}
.about.newsPage .btnbox a.btn{ font-weight: 700; background: var(--gradient04); }
.about.newsPage .btnbox a.btn:hover{ transform: scale(1.05);}

/* ============== 聯絡我們 contact ============== */
.contactBlock{}
.contactBlock .mainContent > .container{z-index: 1;}
.contactBlock .inPagekv{background-image:url(../Images/Contact/case-banner1.jpg); background-position: top left;}

.contactBlock .block.c1{ z-index: 2; padding-top: 0; }
.contactBlock .c1 .container-belt{text-align: right; background-image: url(../Images/Contact/pattern.png); background-size: auto 150%; background-repeat: no-repeat; background-position: left bottom;}
.contactBlock .tableBox{ width: 100%; max-width: 600px; margin-top: -450px; text-align: left; display: inline-block;}
.contactBlock .btnbox a{background-image:var(--gradient06);}
.contactBlock li textarea{min-height:225px;}
.contactBlock .tableBox.bg.G::before{}
.contactBlock .tableBox.bg.R02::after{}
.contactBlock .tableBox .note{font-weight:300;}
.contactBlock .tableBox .note label{font-weight:500;}

.contactBlock .block.c2{ z-index: 1; padding: 0; margin: -400px 0 -200px;}



/* ============== 為什麼選擇 WiXtar why ============== */
.bodybox.why .inPagekv{background-image:url(../Images/why/banner.jpg);}

.why .block{ padding: 4rem 0;}
.why .block.bg::before{ content: ''; display: block; width: 100%; padding-top: 100%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}

.why .w1{}
.block.w1 h2.title,
.block.w1 span{padding: 0 var(--pdh);}
.w1 .graphic{ margin-bottom :5rem;display: block; width: 100%; position: relative; background: url(../Images/Why/w1bg.png) no-repeat center; background-size: contain;}
.w1 .graphic::after{ content: ''; display: block; padding-top: 56.335%; }
.w1 .graphic .circle{ width: 160px; display: inline-flex; justify-content: center; align-items: center; text-align: center; position: absolute; top: 5%; font-style: normal; font-size: 2rem; background: url(../Images/Why/w1_circleBg.svg) no-repeat center; background-size: contain; transition: .3s;}
.w1 .graphic .circle::after{ content: ''; display: block; padding-top: 100%;}
.w1 .graphic .circle.c1{ left: 10%;}
.w1 .graphic .circle.c2{ top: 25%; left: 18%;}
.w1 .graphic .circle.c3{ left: 26%;}
.w1 .graphic .circle.c4{ right: 26%;}
.w1 .graphic .circle.c5{ top: 25%; right: 18%;}
.w1 .graphic .circle.c6{ right: 10%;}

.why .w2.bg::before{ top: -150px; background-image: url(../Images/bgCurve/beverage_yellow.svg);}

.why .w2 h4.title{ margin-bottom: 5rem;}
.why .w2 .btnbox { margin-top: var(--pd);}
.why .w2 .flow .item li.l1{font-size: var(--fsM2);}
.why .w2 .flow .item {position: relative;padding: 4rem 3rem 3rem  3rem; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.why .w2 .flow .item li.l3{font-weight: 600;display:block; top: 0%; left: 50%; transform: translate(-50%, -50%);font-size: var(--fsM);border-radius: 100px;border: 1px solid #DCA52D;background-color: var(--sec03);width:fit-content;min-width: 65%;position: absolute;padding: 0.8rem 2rem;}

.why .w3{ z-index: 3;}
.why .w3.bg::before {top: -100px; background-image: url(../Images/bgCurve/tqg_b7.svg); padding-top: 30%;z-index: -10; }
.why .w3 .btnbox{ margin-top: var(--pd); text-align: center;}
.why .w4{ z-index: 2;}
.why .w4.bg::before { top: -100px; background-image: url(../Images/bgCurve/beverage_yellow.svg); }
/* .why .w4.bg::before { top: -100px; background-image: url(../Images/bgCurve/why_bg4.jpg); } */
.why .w5{ z-index: 3;}
/* .why .w5 .articalList{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.why .w5 .articalList ul{ max-width: 343px; opacity: 0; transform: scale(.93); transition: .8s;}
.why .w5 .articalList ul:nth-of-type(1){ transition-delay: 0s;}
.why .w5 .articalList ul:nth-of-type(2){ transition-delay: .4s;}
.why .w5 .articalList ul:nth-of-type(3){ transition-delay: .8s;}
.why .c5 .w5 .articalList ul,
.why .c6 .w5 .articalList ul{ opacity: 1; transform: scale(1);} */

.why .w5 .articalList ul{ width: calc(100%/4 - 40px); text-align: left; vertical-align: middle; margin: 20px; vertical-align: top; position: relative;}
.why .w5 .articalList li.l3 b{font-size: var(--fsP); font-weight: 700;margin-left: 5px; display: inline;}
.why .w5 .articalList li img{ max-width: 100%;}
.why .w5 .articalList li.l1{ line-height: inherit;}

.why .w6 h2.title,
.why .w6 span{padding: 0 var(--pdh);}
.why .w6{z-index: 4;}
.why .w6.bg::before { top: -160px; background-image: url(../Images/bgCurve/why_bg6.svg); }
.why .w6 h4.title{ z-index: 2;}
/* 跨國落地支援地圖動畫 */
.why .w6 .map{ display: block; width: 100%; background: url(../Images/Why/w6_map.jpg) no-repeat center; background-size: auto 100%; position: relative; z-index: 1; margin-top: -20rem;}
.why .w6 .map::after{ content: ''; display: block; padding-top: 83.073%; }
.why .w6 .map .loc{ position: absolute; }
.why .w6 .map .loc.m1{ width: 51.615%; z-index: 5; top: 26%; left: 17%;}
.why .w6 .map .loc.m2{ width: 47.865%; z-index: 4; top: 52%; left: 0%;}
.why .w6 .map .loc.m3{ width: 39.115%; z-index: 3; top: 10%; left: 32%;}
.w6 .map .loc::before,
.w6 .map .loc::after{ content: ''; display: block;}
.w6 .map .loc::before{ background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; opacity: 0; transition: 1s;}
.w6 .map .loc.m1::before{ background-image: url(../Images/Why/w6_circle_tw.svg); }
.w6 .map .loc.m2::before{ background-image: url(../Images/Why/w6_circle_sg.svg); transition-delay: 1s; }
.w6 .map .loc.m3::before{ background-image: url(../Images/Why/w6_circle_jp.svg); transition-delay: 2s; }
.w6 .map .loc.m1::after{ padding-top: 81.837%; }
.w6 .map .loc.m2::after{ padding-top: 75.082%; }
.w6 .map .loc.m3::after{ padding-top: 90.146%; }

.w6 .map .loc .txt{ width: 100%; text-align: center; font-size: 20px; font-weight: normal; position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; transition: .5s; } 
.w6 .map .loc .txt b{ font-weight: bold; margin-left: .5rem;}
.w6 .map .loc .txt b.b1 { font-size: 26px;}
.w6 .map .loc.m1 .txt{ left: -9%; transition-delay: .5s;}
.w6 .map .loc.m2 .txt{ left: -16%; transition-delay: 1.5s;}
.w6 .map .loc.m3 .txt{ left: 4%; transition-delay: 2.5s;}

.c6 .w6 .map .loc .txt{ opacity: 1;}
.c6 .w6 .map .loc::before{ opacity: 1; width: 100%; height: 100%;}

.why .w7{z-index: 2;}
.why .w7.bg::before { top: -120px; background-image: url(../Images/bgCurve/beverage_yellow.svg); }
.why .w7 .articalList.s2{}
.why .w7 .articalList.s2 .group ul{ width: calc(100%/5 - 1rem); padding: 1rem 1rem 3rem; margin: .5rem; }
.why .w7 .articalList.s2 .group ul li{ padding-bottom: 0; }
.why .w7 .articalList.s2 .group ul .l1{ position: relative; background-position: center top; background-repeat: no-repeat; background-size: 90%;}
.why .w7 .articalList.s2 .group ul .l1::after{ content: ''; display: block; padding-top: 100%;}
.why .w7 .articalList.s2 .group ul .l2{ margin-bottom: 1rem; font-size: var(--fsM); font-weight: bold; width: 100%; text-align: center;}

.why .w8{z-index: 6;}
.why .w8.consultBanner{background-image:url(../Images/why/consult_banner.jpg);}

.why .w9{z-index: 4;}
.why .w9.bg::before{ background-image: url(../Images/bgCurve/beverage_yellow.svg);}

/* ============== 徵才情報 jobs ============== */
.about.jobs{}
.about.jobs .inPagekv{background-image:url(../Images/About/case-banner3.jpg);}
.about.jobs .mainContent .container::after{ content: ''; display: inline-block; width: 1730px; height: 990px; background-image: url(../Images/inPageBgG4.svg); background-repeat: no-repeat; background-position: top center; position: absolute; z-index: -1; bottom: -500px; left: -100px;}
.about.jobs .article{ position: relative;}
.about.jobs .article *{display: inline-block;}
.about.jobs .article .area1{ width: 100%; padding: var(--pd) 0; background-image: url(../Images/About/job-map.png); background-size: contain; background-repeat: no-repeat; background-position: center; position: relative;}
.about.jobs .article .area1::after{ content: ''; display: block; padding-top: 68.25%;}
.about.jobs .article .area1 .txt{ width: 550px; position: absolute; top: 45%; right:0; padding: 20px; background-color: rgba(255,255,255,.5); border-radius: 25px;}
.about.jobs .article .area2{ display: flex; justify-content: space-around; align-items: center; padding: var(--pd) 0; }
.about.jobs .article .txt{ width: 420px;}
.about.jobs .article .txt h5{ font-size: var(--fsL); font-weight: 700; margin-bottom: var(--pdh);}
.about.jobs .article .txt p{ font-size: var(--fsP); font-weight: 300;}
.about.jobs .article img{ border-radius: 25px; width: 50%; max-width: 660px;}


/* ============== error ============== */

.erro{}
.erro .main{display:block; height:100%; overflow:auto;}
.erro .mainContent{background-image:url(../Images/erro.jpg); background-size:cover; background-position:center bottom; width:100%; height: 100vh; background-color:#EFEFEF; text-align:center; font-size:28px;}
.erro .info{margin:-125px 0 0 0px; position:absolute; top:50%; left:50%;}
.erro .info b{line-height:180px; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight:200; font-size:250px;}
.erro .info a{padding:10px 50px; width:100%; border-radius:99px; background-image:var(--gradient17); letter-spacing:2px; font-size:20px; color:#000; font-size:18px; margin-top:20px;}

/* ============== investor 投資人專區 ============== */
.investor .inPagekv{background-image:url(../Images/Contact/case-banner1.jpg);}




/* ================================================ */
/* ============== Style2 ============== */

/* ============== industry/beverage 茶飲 ============== */
.bodybox.beverage .block {padding: var(--pd2) 0 var(--pd2) 0;}
.beverage .btnbox {margin-top: var(--pd2);}

.beverage .pager{padding: 2rem 0 0 0; text-align: center;}
.beverage .pager a{ font-size: 0; background-color: var(--com04); width: 10px; height: 10px; margin: 0 5px; padding: 0; border-radius: 10px; display: inline-block; transition: .3s;}
.beverage .pager a.focus,
.beverage .pager a:hover{ transform: scale(1.3); background-color: var(--sec02);}

.bodybox.beverage .block.b3 {padding: var(--pd2) 0 0 0;}
.bodybox.beverage .block.b7 { padding: 0 0 var(--pd3) 0;}

/* 背景 */
.beverage .block{background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.beverage .block::before{ content: ''; display: block; width: 100%; padding-top: 100%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}

.beverage .block.b9 {z-index: 6;}
.beverage .block.b4 {z-index: 5;}
.beverage .block.b4::before { padding-top:0; height: 50%; top: -100px; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.beverage .block.b1 {z-index: 4;}
.beverage .block.b1::before { top: -150px; background-image: url(../Images/bgCurve/beverage_grey.svg);}
.beverage .block.b2::before { top: -150px; background-image: url(../Images/bgCurve/beverage_yellow.svg); }
.beverage .block.b3::after{ content: ''; height: 2690px; top: -550px; background-image: url(../Images/industry/beverage/b3-bg.svg); }
.beverage .block.b7 {z-index: 3;}
.beverage .block.b8 {z-index: 2;}
.beverage .block.b8::before {top: -150px; background-image: url(../Images/bgCurve/beverage_yellow.svg);}
.beverage .block.b5{z-index: 3;}
.beverage .block.b5::after{ content: ''; height: 1600px; top: -370px; background-image: url(../Images/product/pos/p6-bg.svg); opacity: .5;}
.beverage .block.b10::before { padding-top:0; height: 50%; top: -100px; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}

.beverage .b9 .articalList ul{ width: calc(100%/4 - 40px); text-align: left; vertical-align: middle; margin: 20px; vertical-align: top; padding: 2rem var(--pdh); background-color: rgba(255, 255, 255, .3); border-radius: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.beverage .b9 .articalList ul:hover { box-shadow: 0px 1px 8px rgba(255, 208, 0, 0.925);}
.beverage .b9 .articalList li img{ width: 60%; }
.beverage .b9 .articalList li { padding-bottom: 20px;}
.beverage .b9 .articalList li.l3 { padding-bottom: 0px;}

.beverage .b2 .tableSet ul li{ display: inline-block; text-align: left;}
.beverage .b2 .tableSet > ul > li.pic{ padding: 0; padding: 2rem; text-align: center; position: relative;}
.beverage .b2 .tableSet > ul > li.pic::after{ content: ''; display: block; width: 60%; padding-top: 60%; background-color: var(--sec03); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .3; z-index: -1;}
.beverage .b2 .tableSet dl{ margin-bottom: 1.5rem;}
.beverage .b2 .tableSet dt b{ font-size: var(--fsXL2);font-weight: 500;}
.beverage .b2 .tableSet dt span{ font-weight: 100;}

.beverage .consultBanner{background-image: url(../Images/industry/beverage/banner_last.jpg);}

/* FAQ from beverage 有標題的FAQ */
.qa_title{width: 100%;}
.FAQ .title{display: inline-block; font-weight: 500; padding:1.5rem; width:100%; margin-bottom:0; display: inline-block; font-size:var(--fsP); text-align:left; border-bottom: solid 1px var(--com04); cursor: pointer;  }
.FAQ .title {display: flex; align-items: flex-start;}
.FAQ .title { font-weight: 600;}

.FAQ .title:first-child{  margin-top: 1rem;}
.FAQ .title::before { content: ""; display: inline-block; vertical-align: top;color: var(--sec02); margin-right: 0.5rem}

.FAQ .intro { margin-bottom:0rem; border-bottom: solid 0px;}
.FAQ .intro>ul { width: 100%;border-bottom: solid 1px #d7d7d7;text-align: left;}
.FAQ .intro a{vertical-align: baseline;}
.FAQ .intro span{display: block;}
.FAQ .intro b {position: relative;}
.FAQ .intro.show { display: inline-block;}

.FAQ .title + dd { display: none;}
.FAQ .title.show + dd { display:inline-block;}
.FAQ dd .cq02 { display: none; }
.FAQ dd .cq01.show + .cq02 {display: inline-block;border-bottom: solid 1px #d7d7d7;}

.FAQ dd { display:inline-block; width: 100%; padding:0 ;}
.FAQ dd .cq01,
.FAQ dd .cq02{font-size: var(--fsP); width: 100%; position: relative; padding:0.7rem 0.7rem 0.7rem 80px;}
.FAQ dd .cq01::before{ content: 'Q：';}
.FAQ dd .cq01::before,
.FAQ dd .cq02::before{ font-weight: 500; position: absolute; left: 7px; margin: 0  0  0 var(--fsL); color: var(--sec02);}
.FAQ dd .cq01 {cursor: pointer;}
.FAQ dd .cq01.show { border-top: solid 1px #d7d7d7;padding-bottom:0;}
.FAQ dd .cq01.show:nth-child(1){ border-top: solid 0px; }
.FAQ dd .cq01.show + .cq02:last-of-type{ border-bottom: solid 0px; }

.FAQ dd .cq02::before{ content: 'A：';color: #000;}
.FAQ dd .cq02{display: none;}
.FAQ dd .cq02 li{display: list-item; margin-left: var(--fsM);}
.FAQ dd .cq02 ul li {list-style: disc;}
.FAQ dd .cq02 ol li {list-style: decimal;} 

.FAQ dt {position: relative;transition:.3s;}
.FAQ dt:hover {color: var(--sec02);}
.FAQ dt b{display:inline-block;color: var(--gray02);transform: rotate(0deg);transition:.3s; color: var(--com03);} 
.FAQ dt b.UI.next {line-height: 1; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(0deg);  font-size: 0; font-size: var(--fsP);}
.FAQ dt.show b.UI.next {transform: translateY(-50%) rotate(90deg);color: var(--sec02);}

/* ———————————————— */


/* 常見問題 只有QA 沒有標題 */
.FAQ02 dd .cq01::before, .FAQ02 dd .cq02::before{margin: 0;}

.FAQ02 .title{display: inline-block; font-weight: 500; padding:1.5rem 5rem 1.5rem 1.5rem; width:100%; margin-bottom:0; display: inline-block; font-size:var(--fsP); text-align:left; border-bottom: solid 1px var(--com04); cursor: pointer;  }
.FAQ02 .title {display: flex; align-items: flex-start;}

.FAQ02 .title:first-child{margin-top: 1.5rem;}
.FAQ02 .title::before { content: "Q："; display: inline-block; vertical-align: top; color: var(--sec02);}

.FAQ02 .intro { margin-bottom:0; border-bottom: solid 1px #d7d7d7;}
.FAQ02 .intro a{vertical-align: baseline;}
.FAQ02 .intro span{font-weight: 700;}
.FAQ02 .intro b {position: relative;}
.FAQ02 .intro span.br{font-weight: 400;}

.FAQ02 .title.show + dd { display:inline-block;}
.FAQ02 dd { display:none; width: 100%; padding: 1rem 1.5rem;}
.FAQ02 dd .cq01{font-size: var(--fsP); width: 100%; position: relative; padding-left: 35px; text-align: left;}
.FAQ02 dd .cq01::before{ content: 'A：';font-weight: 500; position: absolute; left: 0; color: #000;}

.FAQ02 dt {position: relative;transition:.3s;}
.FAQ02 dt:hover {color: var(--sec02);}
.FAQ02 dt b{display:inline-block;color: var(--gray02);transform: rotate(0deg);transition:.3s; color: var(--com03);} 
.FAQ02 dt b.UI.next {line-height: 1; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(0deg);  font-size: 0; font-size: var(--fsP);}
.FAQ02 dt.show b.UI.next {transform: translateY(-50%) rotate(90deg);color: var(--sec02);}

/* ai頁的顔色 */
.FAQ02.ai .title::before,
.FAQ02.ai dt.show b.UI.next,
.FAQ02.ai dt:hover {color: #FA5699;}





.pointer-map{ width: 100%; position: relative; background: url(../Images/industry/beverage/b1.png) no-repeat center; background-size: contain; font-size: 0;}
.pointer-map .bg{ width: 100%; display: block;  padding-top: 45.149%;}
.pointer-map a.pointer{ width: 32px; height: 32px; position: absolute;border-radius: 50%; border: 3px solid #FFF; background-color: #FFF; transition: .3s;}
.pointer-map a.pointer b{width: 100%; height: 100%; background: url(../Images/industry/beverage/b1-point.svg) no-repeat center; background-size: contain; filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.25)); position: absolute; z-index: 5;}
/*.pointer-map a.pointer::before,*/
.pointer-map a.pointer::after{ content: ''; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(255,255,255,.8); z-index: 1; position: absolute;}

.pointer-map a.pointer:hover{ transform: scale(1.2);}
/*.pointer-map a.pointer::before{animation: tweening 2s linear 0s infinite normal;}*/
.pointer-map a.pointer::after{animation: tweening 1.5s ease-out 0s infinite normal;}

@keyframes tweening{
	0% {transform: scale(1); opacity: .7;}
	70% {transform: scale(1.75); opacity: 0;}
	100% { opacity: 0;}
}


.pointer-map a.pointer.m1,
.pointer-map > dl.m1{top: 19%; left: 17%;}
.pointer-map a.pointer.m2,
.pointer-map > dl.m2{top: 53%; left: 17%;}
.pointer-map a.pointer.m3,
.pointer-map > dl.m3{top: 53%; left: 63%;}
.pointer-map a.pointer.m4,
.pointer-map > dl.m4{top: 16%; left: 42%;}
.pointer-map a.pointer.m5,
.pointer-map > dl.m5{top: 43%; left: 39%;}
.pointer-map a.pointer.m6,
.pointer-map > dl.m6{top: 27%; left: 53%;}
.pointer-map a.pointer.m7,
.pointer-map > dl.m7{top: 36%; left: 81%;}

.pointer-map > dl{ opacity: 0; position: absolute; pointer-events: none; transition: .3s; font-size: var(--fsP); background-color: #FFF; border-radius: 30px; width: 230px; z-index: 1; padding: var(--pd) 3rem; transform: translate(calc(-50% + 25px), 50px);filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.25));}
.pointer-map > dl.on{ opacity: 1; pointer-events: auto; z-index: 10;}
.pointer-map > dl dt{ color: #000; font-weight: 700; margin-bottom: var(--pdh);}
.pointer-map > dl dd{ color: var(--sec04);}
.pointer-map > dl a.btn{ display: block; width: fit-content; font-size: var(--fsS); background-color: var(--sec02); font-weight: 700; padding: 5px 15px; letter-spacing: 0; transition: .3s;margin-top: var(--pdh);}
.pointer-map > dl a.btn:hover{background-color: var(--sec03);}

.hd-bg::after{ width: 100%; left: 0; position: absolute;  background-repeat: no-repeat; background-size: 100% auto; background-position: center 0px; z-index: -1; pointer-events: none;}
.beverage .block.b1{}
.beverage .block.b2{z-index: 3;}
/* .beverage .b2 .tableSet{ background: url(../Images/industry/beverage/b2-bg.svg) no-repeat center; background-size: contain;} */
.beverage .b2 .tableSet li{ display: table-cell; vertical-align: middle; width: 50%; padding: 1rem 2rem 0;}
.beverage .b2 .tableSet img{ width: 85%;}
.beverage .b2 .tableSet dt{font-size: var(--fsM2); color: var(--sec02); font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem;}
.beverage .b2 .tableSet dd{font-size: var(--fsP); width: 100%;margin-bottom: 0.5rem; position: relative; padding-left: 30px;}
.beverage .b2 .tableSet dd:last-child{margin-bottom: 0rem;}
.beverage .b2 .tableSet dd::before{ content: ''; width: 10px; height: 10px; background-color: var(--sec02); border-radius: 50%; position: absolute; top: calc(var(--fsP)/2); left: 7px;}

.block.b2 .tableSet ul dl{ transform: translateY(10%); opacity: 0; transition: 1s;}
.block.b2.t1 .tableSet ul:nth-of-type(1) dl,
.block.b2.t2 .tableSet ul:nth-of-type(1) dl,
.block.b2.t2 .tableSet ul:nth-of-type(2) dl,
.block.b2.t3 .tableSet ul:nth-of-type(1) dl,
.block.b2.t3 .tableSet ul:nth-of-type(2) dl,
.block.b2.t3 .tableSet ul:nth-of-type(3) dl{transform: translateY(0%); opacity: 1;}


.beverage .b7 .album01 {display: block; font-size: 0; text-align: center;/*align-items: center;
 justify-content: space-between; position: relative;*/ }
.beverage .b7 .album01 a.UI{font-size: var(--fsXL); color: var(--sec04); width: 60px; height: 60px; background-color: #FFF; border-radius: 50%; position: relative; transition: .3s; border: 2px solid var(--sec05); vertical-align: middle;}
.beverage .b7 .album01 a.UI::before{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.beverage .b7 .album01 a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}

.beverage .b7 .album01 .list{ display: inline-block; vertical-align: middle; margin: 10px; position: relative; width: calc(100% - 70px*2); padding: 45px 0; white-space: nowrap; overflow: hidden;}
/* .beverage .b7 .album01 .item {display: inline-flex; align-items: flex-start; justify-content: space-evenly;} */

/* 一個客戶證言的寫法 */
.beverage .b7 .album01 .item li {position: relative; z-index: 2; display: inline-block; width: 100%; padding: 0 45px;}
.beverage .b7 .album01 .item { width: calc(50% - var(--pd2)); border-radius: 40px; width: 100%; text-align: center; height: 260px; white-space: normal; display: flex; flex-direction: column; position: relative;font-size: var(--fsM); display: inline-block;  width: calc(100% / 1);  vertical-align: top; padding: 40px 15px;} /* width: calc(100% / 3);*/
.beverage .b7 .album01 .item::after { content: ''; position: absolute;left:0; top: 0; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left2.svg),url(../Images/industry/beverage/dialog_frame_right2.svg); background-repeat: no-repeat, no-repeat; background-position: center left, center right; background-size: auto 100%, auto 100%;}
/* 有照片的寫法 */
/* .beverage .b7 .album01 li.a1 {display: block; text-align: center; padding: 0;}
.beverage .b7 .album01 li.a1 img{ width: 100%; max-height: 360px; border-radius: 20px;}
.beverage .b7 .album01 li.a1, */
/* 3個客戶證言的寫法 */
/*.beverage .b7 .album01 .item { font-size: var(--fsM); display: inline-block;  width: calc(100% / 1);  vertical-align: top; padding: 40px 15px;}  width: calc(100% / 3);*/
/* .beverage .b7 .album01 .group{ width: calc(50% - var(--pd2));} */
/* .beverage .b7 .album01 .group { border-radius: 40px; width: 100%; text-align: center; height: 260px; white-space: normal; display: flex; flex-direction: column; position: relative; }margin-top: 100px; height: 450px; */
/* .beverage .b7 .album01 .group::after{ content: ''; position: absolute; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left1.svg),url(../Images/industry/beverage/dialog_frame_right1.svg); background-repeat: no-repeat, no-repeat; background-position: center left, center right; background-size: auto 100%, auto 100%;} */
.beverage .b7 .album01 .item li.a2 {display: flex; align-items: center; font-size: var(--fsM); font-weight: 600; text-align: left; margin-bottom: 30px; margin-top: -75px;}/* margin-bottom: 30px; margin-top: -36px; */
.beverage .b7 .album01 .item li.a2 .logo,
.beverage .b7 .album01 .item li.a4 .photo{ display: inline-block; vertical-align: middle; width: 72px; height: 72px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center;}
.beverage .b7 .album01 .item li.a2 .logo { aspect-ratio: 1 / 1;margin-right: 0.5rem; background-color: #F4F1EB; border: 1px solid rgb(133, 129, 126); background-size:65%;}
.beverage .b7 .album01 .item li span{padding: 0rem 0.5rem; white-space: nowrap;}
.beverage .b7 .album01 .item li.a2 span{background-color: #F4F1EC;}
.beverage .b7 .album01 .item li.a4 span{background-color: #F8F6F3;}

.beverage .b7 .album01 .item li.a3 { font-size: var(--fsP); font-weight: 400; text-align: left; margin-bottom: var(--pdq); position:relative;}
.beverage .b7 .album01 .list li.a3:first-letter { padding-left: 30px;}
.beverage .b7 .album01 .list li.a3::before,
.beverage .b7 .album01 .list li.a3::after{color: var(--sec02); font-size: var(--fsXL2); line-height: 1; position: absolute;}
.beverage .b7 .album01 .list li.a3::before {content:'“';}
.beverage .b7 .album01 .list li.a3::after {content:'”';}
.beverage .b7 .album01 .list li.a4 { font-size: var(--fsP); text-align: right; margin-bottom: -65px;}
.beverage .b7 .album01 .item li.a4 .photo { margin-left: 0.5rem; background-image: url(../Images/industry/beverage/default_people.jpg);}
.beverage .b7 .album01 .list li.a5 { margin-bottom:var(--pdq);}
.beverage .b7 .album01 .list li.a5 a.btn {font-size: var(--fsS); background-color: var(--sec01); font-weight: 500; padding: 7px 15px;}
.beverage .b7 .album01 .pager{ position: absolute; left: 0px; bottom: 0px; width: 100%; text-align: center; margin-top: 30px;}
.beverage .b7 .album01 .pager a{ background-color: #D9D9D9; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; transition: .3s;}
.beverage .b7 .album01 .pager a.focus,
.beverage .b7 .album01 .pager a:hover{ transform: scale(1.3); background-color: var(--sec02); border-color: #FFF; }

/* ============== service/maintenance 維運服務 ============== */
.mainten{}
.mainten .inPagekv{background-image:url(../Images/service/maintenance/banner.jpg);}

.mainten .block.m1{ text-align: center;}

.mainten .block.m1 .moviebox{ display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; margin-top: calc(0px - var(--pd2)); width: 100%; height: 750px;}
.mainten .block.m1 .moviebox .point{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.mainten .block.m1 .moviebox .point::before,
.mainten .block.m1 .moviebox .point::after{ content: ''; width: 100%; height: 100%; position: absolute; background-size: auto 100%; background-repeat: no-repeat; top: 50%;  left: 50%; transform: translate(-50%, -50%);}
.mainten .block.m1 .moviebox .point::before{ background-position: left center; }
.mainten .block.m1 .moviebox .point::after{ background-position: right center; }
.mainten .block.m1 .moviebox .front{ z-index: 3;}
.mainten .block.m1 .moviebox img{ z-index: 2; position: relative; border-radius: 20px; border: 5px solid var(--sec03); width: 60%; max-width: 740px;}
.mainten .block.m1 .moviebox .back{ z-index: 1;}
.mainten .block.m1 .moviebox .front::before{ background-image: url(../Images/service/maintenance/m1-1a.png);}
.mainten .block.m1 .moviebox .front::after{ background-image: url(../Images/service/maintenance/m1-1b.png);}
.mainten .block.m1 .moviebox .back::before{ background-image: url(../Images/service/maintenance/m1-2a.png);}
.mainten .block.m1 .moviebox .back::after{ background-image: url(../Images/service/maintenance/m1-2b.png);}

.mainten .block.m2 .tabList{}
.mainten .block.m2 ul.tabList ul.list{ font-size: var(--fsP); font-weight: 400;}
.mainten .block.m2 .tabList .list li{ padding: 0px var(--pd) var(--pd); width: 100%; }
.mainten .block.m2 .tabList li.head{ font-size: var(--fsP); font-weight: 400; padding: 0px var(--pdq) 10px 65px;}
.mainten .block.m2 .tabList li.head::before{ content: 'done'; font-size: 14px; width: auto; height: auto; color: #FFF; padding: 2px; border-radius: 50%; background-color: var(--sec03); position: absolute; left: var(--pd); top: calc(var(--fsP)/2 + 3px);}

.mainten .block.m3,
.mainten .block.m4{}
.mainten .block.m3::after {content: ''; height: 1676px; top: -270px; background-image: url(../Images/service/maintenance/m3-bg.svg);}
.mainten .block.m4::after {content: ''; height: 2476px; top: -500px; background-image: url(../Images/service/maintenance/m4-bg.svg);}
.mainten .block.m3 .container-belt,
.mainten .block.m4 .container-belt{ display: flex; align-items: center; justify-content: space-evenly;}

.mainten .block.m3 .group,
.mainten .block.m4 .group,
.mainten .block.m3 h5,
.mainten .block.m3 ul,
.mainten .block.m3 li,
.mainten .block.m4 h5,
.mainten .block.m4 dt,
.mainten .block.m4 dd{ display: block; text-align: left; }

.mainten .block.m3 img,
.mainten .block.m4 img{margin-right: var(--pd2); width: calc(50% - var(--pd2));}

.mainten .block.m3 ul{font-size: var(--fsP);font-weight: 500;}
.mainten .block.m3 li{padding: 0px var(--pdq) 10px 40px; position: relative;}
.mainten .block.m3 li::before{ content: 'done'; font-size: 14px; width: auto; height: auto; color: #FFF; padding: 2px; border-radius: 50%; background-color: var(--sec03); position: absolute; left: 10px; top: calc(var(--fsP)/2 - 5px);}

.mainten .block.m4 dl{font-size: var(--fsP); }
.mainten .block.m4 dt{color: var(--sec02); font-weight: 500; margin-top: var(--pdh); padding-bottom: 10px;}
.mainten .block.m4 dt.title{ font-size: var(--fsM); color: #000;  margin-bottom: var(--pdh); margin-top: 0; padding-bottom: 0;}
.mainten .block.m4 dd{padding: 0px var(--pdq) 10px 30px; position: relative;}
.mainten .block.m4 dd::before{ content: ''; width: 10px; height: 10px; color: #FFF; border-radius: 50%; background-color: var(--sec02); position: absolute; left: 10px; top: calc(var(--fsP)/2 - 1px);}


.mainten .block.m5{}
.mainten .block.m5::after {content: ''; height: 1823px; top: -370px; background-image: url(../Images/service/maintenance/m5-bg.svg);}

.mainten .block.m5 .article{ display: block; width: 100%; text-align: left; background:url(../Images/service/maintenance/m5-num.svg) no-repeat center 200%; background-size: contain; position: relative; transition: 1s;}
.mainten .block.m5 .article h5{position: absolute; top: 50%; right: 15%; opacity: 0; text-align: right; transform: translateY(-50%); margin-bottom: 0; transition: 2s; transition-delay: 1s;}
.mainten .block.m5 .article h5 .note2{font-size: var(--fsM); margin-top: var(--pdh); }
.mainten .block.m5 .article h5 .note2 b{font-size: var(--fsL); background-image: linear-gradient(0deg, #E1A5CD 30%, #FFD75A 100%); }
.mainten .block.m5 .article .map{ width: 90%; padding-top: 55%; position: relative; background: url(../Images/service/maintenance/m5-map.png) no-repeat center; background-size: contain; transition: 1s; transition-delay: 1s;}
.mainten .block.m5 .article .map::before{ content: ''; width: 100%; height: 100%; background: url(../Images/service/maintenance/m5-loc.png) no-repeat center; background-size: contain; position: absolute; top: 0; left: 0; transition: 1.5s; opacity: 0; transition-delay: 3s;}

.mainten .t1 .block.m5 .article{ background-position: center 90%;}
.mainten .t1 .block.m5 .article h5{right: 10%; opacity: 1;}
.mainten .t1 .block.m5 .article .map{opacity: 1; width: 50%;}
.mainten .t1 .block.m5 .article .map::before{ opacity: 1;}


/* ============== restaurant-pos ============== */
a.btn.fold{width:fit-content; margin:0 auto; display: block; text-align: center; background-color: transparent; color: var(--sec02);margin-top: 1rem;font-weight: 500;}
a.btn.fold:hover{filter: none;}
a.btn.fold .UI.next {display: inline-block;transform: rotate(90deg);}
.openTable.showall a.btn.fold .UI.next {transform: rotate(-90deg); }

/* 背景 */
.restaurant .block.bg{background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.restaurant .block.bg::before,
.restaurant .block.bg::after{ content: ''; display: block; width: 100%; /*padding-top: 100%;*/ position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.restaurant .block.extra {padding: 0 0 var(--pd2) 0;}
.restaurant .block.r5a.extra {padding: 0;}

.restaurant .block.r1 {z-index: 6;}
.restaurant .block.r2 {z-index: 5;}
.restaurant .block.r2::before { top: -150px; padding-top: 30%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.restaurant .block.r3 {z-index: 4;}
.restaurant .block.r3::before { top: -150px; padding-top: 52.08%; background-image: url(../Images/bgCurve/beverage_yellow.svg);}
.restaurant .block.r4 {z-index: 3;}
.restaurant .block.r4::before { top: -150px; padding-top: 52.08%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.restaurant .block.r5 {z-index: 4; padding-bottom:0; }
.restaurant .block.r5a {z-index: 5;}
.restaurant .block.r5::before { content: ''; top: -120px; padding-top: 52.08%; background-image: url(../Images/bgCurve/beverage_yellow.svg);}
/* .restaurant .block.r5 { top: -150px; background-image: url(../Images/bgCurve/beverage_yellow.svg);} */
.restaurant .block.r6 {z-index: 4; padding-bottom:0; }
.restaurant .block.r6a {z-index: 5;}
.restaurant .block.r6::before {top: -150px; padding-top: 52.08%; background-image: url(../Images/bgCurve/beverage_yellow.svg);}
.restaurant .block.r7 {z-index: 4;padding: 5rem 0 0 0;}
.restaurant .block.r7a {z-index: 7;}
.restaurant .block.r7::after{ content: ''; height: 2690px; top: -550px; background-image: url(../Images/industry/beverage/b3-bg.svg); }
.restaurant .block.r8 {z-index: 6;}
.restaurant .block.r8::before {top: -150px; padding-top: 52.08%; background-image: url(../Images/bgCurve/beverage_yellow.svg);}
.restaurant .block.r9 {z-index: 7;}

/* consultBanner */
.restaurant .consultBanner{background-image: url(../Images/industry/restaurant/consult_banner.jpg);}

.restaurant .btnbox {margin-top: var(--pd);}
.restaurant .r3 .btnbox {margin-top: 0;}
.restaurant .r6a .btnbox {margin-top: var(--pd2);}

/* 5 大差異化特色 r1 */
.restaurant .r1 .iconList { display: flex; justify-content: space-between;}
.restaurant .r1 .iconList > div{ display: inline-block; width: calc(100%/5 - 10px); vertical-align: top; padding: 2rem 1.9rem ; background-color: rgba(255,255,255,.3);border-radius: 25px; box-shadow: 0px 1px 8px rgba(0,0,0,.25); text-align: center;}
.restaurant .r1 .iconList .icon img{width: 130px; margin:0 auto;}
.restaurant .r1 .iconList .icon { position: relative;padding: 3rem; }
.restaurant .r1 .iconList .icon::after {content: "";width: 100%; height: 80%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%) ;}
.restaurant .r1 .iconList .icon.i1::after {background: url(../Images/ui/numbers/Num1.svg) no-repeat center;background-size: contain;}
.restaurant .r1 .iconList .icon.i2::after {background: url(../Images/ui/numbers/Num2.svg) no-repeat center;background-size: contain;}
.restaurant .r1 .iconList .icon.i3::after {background: url(../Images/ui/numbers/Num3.svg) no-repeat center;background-size: contain;}
.restaurant .r1 .iconList .icon.i4::after {background: url(../Images/ui/numbers/Num4.svg) no-repeat center;background-size: contain;}
.restaurant .r1 .iconList .icon.i5::after {background: url(../Images/ui/numbers/Num5.svg) no-repeat center;background-size: contain;}

.restaurant .r1 .iconList .txt {display: block; text-align: center; }
.restaurant .r1 .iconList b{ display: inline-block; width: 100%; font-size: var(--fsM); font-weight: 600; margin: 0; margin-bottom: 1rem;}
.restaurant .r1 .iconList.show b {margin-bottom: 1rem;}

.restaurant .r1 .iconList p{ margin-bottom: 1rem;}
.restaurant .r1 .iconList ul li{ font-size: var(--fsP); font-weight: 400; text-align: left;display: block; padding:0px 0px 30px 20px; margin-bottom: 0.5rem; position: relative; padding-bottom: 0px;}
.restaurant .r1 .iconList ul li::before{content: ''; width: 8px; height: 8px; background-color: var(--sec02); border-radius: 50%; position: absolute;  top: calc(var(--fsP) / 2); left: 3px;}
.restaurant .r1 .iconList p{font-weight: 500;min-height: 55px; display: flex; align-items: center; justify-content: center;}

.restaurant .r1 .iconList ul {display: none;}
.restaurant .r1 .iconList.show p.intro{display: inline-block;margin-bottom: 1.5rem;}
.restaurant .r1 .iconList.show ul {display: flex ;flex-wrap: wrap; justify-content: flex-start; } /* display: inline-block; */

.restaurant .r1 a.btn span.off{display: none;}
.restaurant .r1 .iconList.show + a.btn span.on {display: none;}
.restaurant .r1 .iconList.show + a.btn span.off {display: inline-block;}

.restaurant .r1 a.btn .UI.next {display: inline-block;transform: rotate(90deg);}
.restaurant .r1 .iconList.show + a.btn .UI.next {transform: rotate(-90deg); }

.restaurant .r1 .iconList ul li.intro2 { font-weight: 500;padding-left: 0;margin-bottom: 1rem; }
.restaurant .r1 .iconList ul li.intro2::before{content: none;}

/* 7 個導入效益 r2 */
.restaurant .r2 .articalList{ text-align: center; }
.restaurant .r2 .articalList ul{ width: calc(100%/4 - 40px); text-align: left; vertical-align: middle; margin: 20px; vertical-align: top; padding: 2rem 1rem;}
.restaurant .r2 .articalList li.l1 { width: 100%; padding-bottom: 35px; }
.restaurant .r2 .articalList li.l2 { padding-bottom: 10px;}
.restaurant .r2 .articalList li.l3 { padding-bottom: 0px;}
.restaurant .r2 li.l3 b { color: var(--sec01); font-size: var(--fsM2);}

.restaurant .r2 .articalList li{position:relative;}
.restaurant .r2 .articalList ul:nth-child(1) li.l1::after{ background: url(../Images/ui/numbers/Num1.svg) no-repeat center;}
.restaurant .r2 .articalList ul:nth-child(2) li.l1::after{ background: url(../Images/ui/numbers/Num2.svg) no-repeat center;}
.restaurant .r2 .articalList ul:nth-child(3) li.l1::after{ background: url(../Images/ui/numbers/Num3.svg) no-repeat center;}
.restaurant .r2 .articalList ul:nth-child(4) li.l1::after{ background: url(../Images/ui/numbers/Num4.svg) no-repeat center;}
.restaurant .r2 .articalList ul:nth-child(5) li.l1::after{ background: url(../Images/ui/numbers/Num5.svg) no-repeat center;}
.restaurant .r2 .articalList ul:nth-child(6) li.l1::after{ background: url(../Images/ui/numbers/Num6.svg) no-repeat center;}
.restaurant .r2 .articalList ul:nth-child(7) li.l1::after{ background: url(../Images/ui/numbers/Num7.svg) no-repeat center;}

.restaurant .r2 .articalList li.l1 img { width: 120px;display: block;margin: 0 auto;position: relative; z-index: 1; }
.restaurant .r2 .articalList li.l1 {display: flex; justify-content: center;align-items: center;  position: relative;}
.restaurant .r2 .articalList li.l1::after {content: ""; position: absolute;width: 100%; padding-top: 100%;  background-repeat: no-repeat; background-position: center; background-size: contain;}

/* 4 種常見餐廳型態 */
.restaurant.s2 .r3 a.anchor  {transform: translateY(-80px);}

.restaurant h5.title { margin-bottom: 0;}

.restaurant .tab-list{ display: flex;justify-content: space-evenly; width: 100%; text-align: center; font-size: 0; padding: 0.5rem 0;}
.restaurant .tab-txt{ display: flex;justify-content: space-evenly; width: 100%; text-align: center; }
.restaurant .tab-list{border-bottom: solid 2px var(--sec02);}
.restaurant .tab-list a{ display: inline-block; font-size: var(--fsM); font-weight: 500; color: #000; padding: 8px 20px; margin: 5px 10px; border-radius: 10px; transition: .3s;}
.restaurant .tab-list a:hover,
.restaurant .t1 .tab-list a.t1,
.restaurant .t2 .tab-list a.t2,
.restaurant .t3 .tab-list a.t3,
.restaurant .t4 .tab-list a.t4,
.restaurant .t5 .tab-list a.t5,
.restaurant .t6 .tab-list a.t6,
.restaurant .t7 .tab-list a.t7{ background-color: var(--sec02); color: #FFF;}

.restaurant .tab-txt .page{ display: none;}
.restaurant .t1 .tab-txt .page.t1,
.restaurant .t2 .tab-txt .page.t2,
.restaurant .t3 .tab-txt .page.t3,
.restaurant .t4 .tab-txt .page.t4,
.restaurant .t5 .tab-txt .page.t5,
.restaurant .t6 .tab-txt .page.t6,
.restaurant .t7 .tab-txt .page.t7{ width: 100%;display: flex; justify-content: center; align-items: center;align-items: flex-start;}

.restaurant .r3 .intro{ text-align: center; margin: 4rem 0;}
.restaurant .r3 .intro b{display: block;font-size: var(--fsM) ;font-weight: 500; color:#BE6EA1; font-family:'Noto Sans TC';}
.restaurant .r3 .intro p{ font-size: var(--fsP); font-weight: 400; color: var(--com02);}

.restaurant .tab-intro .intro{ display: none;}
.restaurant .t1 .tab-intro .intro.t1,
.restaurant .t2 .tab-intro .intro.t2,
.restaurant .t3 .tab-intro .intro.t3,
.restaurant .t4 .tab-intro .intro.t4{ display: block; text-align: center; font-size: var(--fsP); font-weight: 500; color: var(--com02);}


.restaurant .t1 .quickmenu .t1,
.restaurant .t2 .quickmenu .t2,
.restaurant .t3 .quickmenu .t3,
.restaurant .t4 .quickmenu .t4{ display: none;padding: 0 ;}
.restaurant .quickmenu { position: relative;text-align: center; width:70%; display:block; padding: 2rem ;margin: 4rem auto ; font-size: 0; border:1px solid  var(--sec02); border-radius: 25px; }
.restaurant .quickmenu a{ position: relative; display: inline-block; border-radius: 8px; transition: .3s; line-height: 1;padding: 6px 10px; margin: 5px 10px; font-size: var(--fsP); font-weight: 400; color: var(--com01); }
.restaurant .quickmenu a:hover { background-color: var(--sec02); color: #FFF;}
/* 3個客戶證言寫法 */
/* .restaurant .quickmenu { position: relative; width:45%; left: 49%; display: inline-block; margin: 4rem 0 ; font-size: 0; }
.restaurant .quickmenu a{ position: relative; display: inline-block; border-radius: 8px; transition: .3s; line-height: 1;padding: 6px 10px; margin: 5px 10px; font-size: var(--fsP); font-weight: 400; color: var(--com01); }
.restaurant .quickmenu a:hover { background-color: var(--sec02); color: #FFF;} */

.restaurant .quickmenu a:first-of-type,
.restaurant .t1 .quickmenu a.t2 { margin: 5px 10px 5px 0; }
.restaurant .quickmenu a::after { content: "|";position: absolute;padding: 0 1.8rem;color: var(--com03);}
.restaurant .t4 .quickmenu a.t3::after,
.restaurant .quickmenu a:last-of-type::after {  content: "";}

.restaurant .quickmenu p { text-align: center; color:#BE6EA1; font-size: var(--fsP);font-weight: 500;}
.restaurant .quickmenu span{ font-size: var(--fsP); color: var(--com03);}


.restaurant .tab-txt .page img{ width: 400px;border-radius: 25px;}
.restaurant .tab-txt .page .group{ width: 50%; padding-left: var(--pd2);}
.restaurant .tab-txt .page .group h5.title {margin-bottom: 2rem;}
.restaurant .tab-txt .page .group h5.title .ch { font-size: var(--fsM2); font-weight: 500; }
.restaurant .tab-txt .page .group h5.title .ch span{ font-size: var(--fsS); font-weight: 400;margin: 0 0 0 0.8rem; color: var(--com02);}
.restaurant .tab-txt .page .group h5.title .note{ font-size: var(--fsP); font-weight: 400; margin-top: 1.5rem;color: var(--com02);line-height: 1.5;}
.restaurant .tab-txt .page .group h5.title .highlight{ font-size: var(--fsP);font-weight: 400; margin-top: 1rem;color: var(--sec02);}
.restaurant .tab-txt .page .group h5,
.restaurant .tab-txt .page .group ul,
.restaurant .tab-txt .page .group li{ text-align: left; font-size: var(--fsP);}/*width: 95%; */
.restaurant .tab-txt .page .group .item h5{font-size: var(--fsM); padding: 1.5rem 0; border-bottom: 1px solid var(--sec02);}
.restaurant .tab-txt .page .group .item.on h5{ border-bottom: 1px solid #fff;}

.restaurant .tab-txt .page .group h5 b.UI{ display: flex;align-items:center; font-size: var(--fsM); font-weight: 500;}
.restaurant .tab-txt .page .group h5 b.UI::before{display: inline-block; vertical-align: bottom; padding: 0 1rem; color: var(--sec03);}
.restaurant .tab-txt .page .group h5 b.UI.down::before{ color: var(--com03);margin-right:0;transform: rotate(-90deg); }

.restaurant .tab-txt .page .group ul{ padding: 1rem 0 1.5rem 0; padding-left: 0.6rem;}
.restaurant .tab-txt .page .group li{ position: relative; padding: 1px 0;color: var(--com02);padding-left:3.5rem;display: block;}

.restaurant .tab-txt .page .group li::before { content: '';width: 6px; height: 6px; background-color: var(--sec02); border-radius: 50%; position: absolute; top: calc(var(--fsP) / 2); left: 16px;}
.restaurant .tab-txt .page .group li b{ font-weight: 600;}

.restaurant .tab-txt .page .group .item ul { display: none; }
.restaurant .tab-txt .page .group .item.on ul { display: block; border-bottom: 1px solid var(--sec02);}

.restaurant .tab-txt .page .group .item h5 {color: var(--com03);cursor: pointer;}
.restaurant .tab-txt .page .group .item.on h5 {color: #000;padding: 1.5rem 0 0 0;}
.restaurant .tab-txt .page .group .item.on h5 b.UI::before { color:var(--sec03);}
.restaurant .tab-txt .page .group .item.on h5 b.UI.down::before { transform: rotate(0deg); color: #000;}

.restaurant .tab-txt .page .list{ border-top: 1px solid var(--sec02); }
.restaurant .tab-txt .page .group h5 a{ font-size: var(--fsS); color: #FFF; background-color: var(--sec02); border-radius: 30px; padding: 8px 20px; margin-left: 20px; vertical-align: middle; transition: .3s;}
.restaurant .tab-txt .page .group h5 a:hover{ background-color: var(--sec03); filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));}
.restaurant .tab-txt .page .list h5{display: flex; align-items: flex-end;justify-content: space-between;}

/* 營運需求比較表 k4 */
.openTable .group{ font-size: 0;text-align: right;position: relative; white-space: nowrap;}
.openTable .mask { overflow:hidden;filter: drop-shadow(0px 2px 3px rgba(225, 165, 205, 0.3));}

.openTable .item li::before{ content: ''; border-bottom: 1px solid #ffffff; }
.openTable .item li.i1::before{ content: '';background-color:var(--sec02);border-bottom: 0px ; }
.openTable .item li.i2::before{ content: '常見場景';}
.openTable .item li.i3::before{ content: '營運訴求';border-bottom: 0px ; }
.openTable .item li.i4::before{ content: '';background-color: var(--sec02); border-bottom: 0px; }
.openTable .item li.i5::before{ content: 'POS 系統';}
.openTable .item li.i6::before{ content: '自助點餐機';}
.openTable .item li.i7::before{ content: '線上點餐';}
.openTable .item li.i8::before{ content: '桌邊掃碼點餐';}
.openTable .item li.i9::before{ content: '桌邊平板點餐';}
.openTable .item li.i10::before{ content: '手持行動點餐機';}
.openTable .item li.i11::before{ content: 'KDS 廚房管理';}
.openTable .item li.i12::before{ content: '廣告叫號機';}
.openTable .item li.i13::before{ content: '報表管理';}
.openTable .item li.i14::before{ content: '會員管理';}
.openTable .item li.i15::before{ content: '票券管理';}
.openTable .item li.i16::before{ content: '外送整合';}
.openTable .item li.i17::before{ content: '多元支付 / 刷卡';}
.openTable .item li.i18::before{ content: '電子發票';}
.openTable .item li.i19::before{ content: 'TQG 門市決策系統';}
.openTable .item li.i20::before{ content: 'ERP 整合';border-bottom: 0px;}

.openTable .item li {position: relative; white-space: normal; }
.openTable .item li::before { position: absolute; font-size: var(--fsP); font-weight: 500; right:100%; top:0; width: 100%; height:100%; padding: 0 1rem; background-color:#F2D7E9; display: flex; justify-content: center; align-items: center;}

.openTable .item.kp2 li::before,
.openTable .item.kp3 li::before,
.openTable .item.kp4 li::before{display: none; }

.openTable .item{width:20%;display: inline-block;vertical-align: top; }
.openTable ul li {font-size: var(--fsP);  background-color:#fff; display: block; padding: 0 1rem;text-align: center; min-height: 53px; display: flex; justify-content: center; align-items: center; border:1px solid #F2D7E9;}
.openTable .item li.i2,
.openTable .item li.i3{ min-height: 110px;}
.openTable ul.head { background-color: var(--sec02); font-weight: 500; }
.openTable .item img {padding: 2rem 0; filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));}
.openTable .item li.i1,
.openTable .item li.i4{ font-size:22px; font-weight: 500; }
.openTable .item li.i1{ white-space: nowrap;background-color:var(--sec02); border-left: 1px solid #fff; }
.openTable .item li.i4{ background-color:var(--sec02);border:1px solid var(--sec02); }

.openTable .item.kp1 .i4,
.openTable .item.kp3 .i4,
.openTable .item.kp4 .i4,
.openTable .item.kp1 .i4 span,
.openTable .item.kp3 .i4 span,
.openTable .item.kp4 .i4 span { display: none; color: transparent;}

.openTable.showall .item.kp4 .i4 { font-size: 0;}
.openTable.showall .item.kp2 .i4 span { display: none;}
.openTable.showall .item.kp4 .i4 span { display: block; color: #000; font-weight: 400; padding:0; }
.openTable.showall ul li span {display: none;font-size: var(--fsS);}
.openTable.showall ul li span {display: block;text-align: right; padding-left : 7rem;}

.openTable .item.kp1 .i4 span,
.openTable .item.kp2 .i4 span,
.openTable .item.kp3 .i4 span,
.openTable .item.kp4 .i4 span { font-weight: 400;}

.openTable .item li.i1::before{border-radius: 20px 0 0 0; border-right: 1px solid #fff;}
.openTable .item.kp4 li.i1{border-radius: 0 20px 0 0;}
.openTable .item li.i3::before{border-radius: 0 0 0 20px;}
.openTable .item.kp4 li.i3{border-radius: 0 0 20px 0 ;}

.openTable.showall .item li.i20::before{border-radius: 0 0 0 20px;}
.openTable.showall .item.kp4 li.i20{border-radius: 0 0 20px 0;}
.openTable.showall .item li.i3{border-radius: 0 0 0 0;}
.openTable.showall .item li.i3::before{border-radius: 0 0 0 0;}

.openTable .item li:nth-of-type(n+4) {display: none;}
.openTable.showall .item li:nth-of-type(n+4) {display: flex; }
.openTable .item li.i4 { padding: 0 ;}

.openTable a.UI,
.openTable .pager{display: none;}

.restaurant .openTable a.btn span.off{display: none;}
.restaurant .openTable.showall + a.btn span.on {display: none;}
.restaurant .openTable.showall + a.btn span.off {display: inline-block;}


/* restaurant 客戶證言 same as beverage */
.restaurant .r7 .album01 {display: block; font-size: 0; text-align: center;margin: 0 0 5rem 0;}
.restaurant .r7 .album01 a.UI{ margin-top: -60px; font-size: var(--fsXL); color: var(--sec04); width: 60px; height: 60px; background-color: #FFF; border-radius: 50%; position: relative; transition: .3s; border: 2px solid var(--sec05); vertical-align: middle;}
.restaurant .r7 .album01 a.UI::before{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.restaurant .r7 .album01 a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}

.restaurant .r7 .album01 .list{ left: 0;display: inline-block; vertical-align: middle; margin: 0 10px; position: relative; width: calc(100% - 70px*2); padding: 25px 0; white-space: nowrap; overflow: hidden;}

.restaurant .r7 .album01 .item li {position: relative; z-index: 2; display: inline-block; width: 100%; padding: 0 45px;}
.restaurant .r7 .album01 .item { left:0px; width: calc(50% - var(--pd2)); border-radius: 40px; width: 100%; text-align: center; height: 250px; white-space: normal; display: flex; flex-direction: column; position: relative;font-size: var(--fsM); display: inline-block;  width: calc(100% / 1);  vertical-align: top; padding: 40px 15px;margin: 3rem 0;} /* width: calc(100% / 3);*/
.restaurant .r7 .album01 .item::after { content: '';position: absolute; left:0; top: 0; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left2.svg),url(../Images/industry/beverage/dialog_frame_right2.svg); background-repeat: no-repeat, no-repeat; background-position: center left, center right; background-size: auto 100%, auto 100%;}
.restaurant .r7 .album01 .item .group{height: 100%; display: flex; flex-direction: column;justify-content: center;}
.restaurant .r7 .album01 .item li.a2 {display: flex; position: relative; align-items: center; font-size: var(--fsM); font-weight: 600; text-align: left; margin-bottom: 30px; margin-top: -36px;}/* margin-bottom: 30px; margin-top: -36px; */
.restaurant .r7 .album01 .item li.a2 .logo,
.restaurant .r7 .album01 .item li.a4 .photo{ display: inline-block; vertical-align: middle; width: 72px; height: 72px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center;}
.restaurant .r7 .album01 .item li.a2 .logo { aspect-ratio: 1 / 1; background-color: #F4F1EB; border: 1px solid rgb(133, 129, 126); background-size:65%;}
.restaurant .r7 .album01 .item li span{padding:1rem; white-space: nowrap;}
.restaurant .r7 .album01 .item li.a2 span{background-color: #F4F1EC;}
.restaurant .r7 .album01 .item li.a4 span{background-color: #F3F0EB;}

.restaurant .r7 .album01 .item li.a3 { font-size: var(--fsP); font-weight: 400; text-align: left; margin-bottom: var(--pdq); position:relative;}
.restaurant .r7 .album01 .list li.a3:first-letter { padding-left: 30px;}
.restaurant .r7 .album01 .list li.a3::before,
.restaurant .r7 .album01 .list li.a3::after{color: var(--sec02); font-size: var(--fsXL2); line-height: 1; position: absolute;}
.restaurant .r7 .album01 .list li.a3::before {content:'“';}
.restaurant .r7 .album01 .list li.a3::after {content:'”';}
.restaurant .r7 .album01 .list li.a4 { font-size: var(--fsP); text-align: right; margin-bottom: -65px;}
.restaurant .r7 .album01 .item li.a4 .photo {background-image: url(../Images/industry/beverage/default_people.jpg);}
.restaurant .r7 .album01 .list li.a5 { margin-bottom:var(--pdq);}
.restaurant .r7 .album01 .list li.a5 a.btn {font-size: var(--fsS); background-color: var(--sec01); font-weight: 500; padding: 7px 15px;}
.restaurant .r7 .album01 .pager{ position: absolute; left: 0px; bottom: 0px; width: 100%; text-align: center; }
.restaurant .r7 .album01 .pager a{ background-color: #D9D9D9; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; transition: .3s;}
.restaurant .r7 .album01 .pager a.focus,
.restaurant .r7 .album01 .pager a:hover{ transform: scale(1.3); background-color: var(--sec02); border-color: #FFF; }

/* 3個客戶證言的寫法 */
/* .restaurant .r7 .album01 {display: block; font-size: 0; text-align: center;align-items: center;
 justify-content: space-between; position: relative; }
.restaurant .r7 .album01 a.UI{font-size: var(--fsXL); color: var(--sec04); width: 60px; height: 60px; background-color: #FFF; border-radius: 50%; position: relative; transition: .3s; border: 2px solid var(--sec05); vertical-align: middle;}
.restaurant .r7 .album01 a.UI::before{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.restaurant .r7 .album01 a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}

.restaurant .r7 .album01 .list{ display: inline-block; vertical-align: middle; margin: 10px; position: relative; width: calc(100% - 70px*2); padding: 45px 0; white-space: nowrap; overflow: hidden;}

.restaurant .r7 .album01 .item { font-size: var(--fsM); display: inline-block; width: calc(100% / 3);  vertical-align: top; padding: 40px 15px;}
.restaurant .r7 .album01 .group{ width: calc(50% - var(--pd2));}
.restaurant .r7 .album01 .group {background: linear-gradient(to bottom,#F4F1EB 0%, #FFFFFF 30%, #FFFFFF 60%, #F5F3EE 100%);border-radius: 50px; width: 100%; text-align: center; height: 450px; white-space: normal; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.restaurant .r7 .album01 .group::after{ content: ''; pointer-events: none; position: absolute; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left.svg),url(../Images/industry/beverage/dialog_frame_right.svg); background-repeat: no-repeat, no-repeat; background-position: center left, center right; background-size: auto 100%, auto 100%;}
.restaurant .r7 .album01 .item li.a2 { z-index: 2; display: flex; align-items: center; font-size: var(--fsM); font-weight: 600; text-align: left; margin-bottom: 30px; margin-top: -36px;}
.restaurant .r7 .album01 .item li.a2 .logo,
.restaurant .r7 .album01 .item li.a4 .photo{ display: inline-block; vertical-align: middle; width: 72px; height: 72px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center;}
.restaurant .r7 .album01 .item li.a2 .logo { aspect-ratio: 1 / 1;margin-right: 0.5rem; background-color: #F4F1EB; border: 1px solid rgb(133, 129, 126); background-size:65%;}
.restaurant .r7 .album01 .item li span{padding: 0rem 0.5rem; white-space: nowrap;}
.restaurant .r7 .album01 .item li.a2 span{background-color: #F4F1EC;}
.restaurant .r7 .album01 .item li.a4 span{background-color: #F5F3EE;}

.restaurant .r7 .album01 .item li.a3 { font-size: var(--fsP); font-weight: 400; text-align: left; margin-bottom: var(--pdq); padding: 3rem; position:relative;}
.restaurant .r7 .album01 .list li.a3:first-letter { padding-left: 30px;}
.restaurant .r7 .album01 .list li.a3::before,
.restaurant .r7 .album01 .list li.a3::after{color: var(--sec02); font-size: var(--fsXL2); line-height: 1; position: absolute;}
.restaurant .r7 .album01 .list li.a3::before {content:'“';}
.restaurant .r7 .album01 .list li.a3::after {content:'”';}
.restaurant .r7 .album01 .list li.a4 { z-index: 2; font-size: var(--fsP); text-align: right; margin-bottom: -30px;}
.restaurant .r7 .album01 .item li.a4 .photo { margin-left: 0.5rem; background-image: url(../Images/industry/beverage/default_people.jpg);}
.restaurant .r7 .album01 .list li.a5 { margin-bottom:var(--pdq);}
.restaurant .r7 .album01 .list li.a5 a.btn {font-size: var(--fsS); background-color: var(--sec01); font-weight: 500; padding: 7px 15px;}
.restaurant .r7 .album01 .pager{ position: absolute; left: 0px; bottom: 0px; width: 100%; text-align: center; margin-top: 30px;}
.restaurant .r7 .album01 .pager a{ background-color: #D9D9D9; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; transition: .3s;}
.restaurant .r7 .album01 .pager a.focus,
.restaurant .r7 .album01 .pager a:hover{ transform: scale(1.3); background-color: var(--sec02); border-color: #FFF; } */


/* 打造智慧餐廳的全通路引擎 k5 */
.restaurant .pointer-map{ width: 100%; position: relative; background: url(../Images/industry/restaurant/r6.png) no-repeat center; background-size: contain; font-size: 0;}
.restaurant .pointer-map .bg{ padding-top: 45.522%;}
.restaurant .pointer-map a.pointer::after{ content: ''; left: 0; top: 0;background-color: rgba(255, 229, 253, 0.8); }
.restaurant .pointer-map a.pointer b{left: 0; top: 0;}

.restaurant .pointer-map a.pointer.m1,
.restaurant .pointer-map > dl.m1{top: 20%; left: 16%;}
.restaurant .pointer-map a.pointer.m2,
.restaurant .pointer-map > dl.m2{top: 48%; left: 33%;}
.restaurant .pointer-map a.pointer.m3,
.restaurant .pointer-map > dl.m3{top: 12%; left: 50%;}
.restaurant .pointer-map a.pointer.m4,
.restaurant .pointer-map > dl.m4{top: 28%; left: 44%;}
.restaurant .pointer-map a.pointer.m5,
.restaurant .pointer-map > dl.m5{top: 61%; left: 44%;}
.restaurant .pointer-map a.pointer.m6,
.restaurant .pointer-map > dl.m6{top: 55%; left: 51%;}
.restaurant .pointer-map a.pointer.m7,
.restaurant .pointer-map > dl.m7{top: 20%; left: 71%;}
.restaurant .pointer-map a.pointer.m8,
.restaurant .pointer-map > dl.m8{top: 58%; left: 73%;}
.restaurant .pointer-map a.pointer.m9,
.restaurant .pointer-map > dl.m9{top:60%; left: 83%;}
.restaurant .pointer-map a.pointer.m10,
.restaurant .pointer-map > dl.m10{top: 17%; left: 89%;}


/* ============== bakerypos ============== */
.bakerypos .b5 .btnbox {margin: var(--pd2) 0 4rem 0;}

/* 背景 */
.bakerypos .block.bg{background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.bakerypos .block.bg::before,
.bakerypos .block.bg::after{ content: ''; display: block; width: 100%; padding-top: 100%; position: absolute; top: -100px; left: 0; z-index: -1; pointer-events: none; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}

.bakerypos .block.b1 {z-index: 6;}
.bakerypos .block.b2 {z-index: 5;}
.bakerypos .block.b2::before { content: ''; padding-top: 25%; background-image: url(../Images/bgCurve/beverage_lightgrey.svg);}
.bakerypos .block.b3 {z-index: 4;padding: 5rem 0 0 0;}
.bakerypos .block.b3a {z-index: 8;}
.bakerypos .block.b3::after{ content: ''; height: 1200px; top: -550px; background-image: url(../Images/industry/beverage/b3-bg.svg); }/* height: 2690px; */
.bakerypos .block.b4 {z-index: 7;}
.bakerypos .block.b4::before { padding-top: 45%; background-image: url(../Images/bgCurve/beverage_yellow.svg);}
.bakerypos .block.b5 {z-index: 8;}
.bakerypos .block.b5::before { content: ''; padding-top: 52.08%;  background-image: url(../Images/bgCurve/beverage_yellow.svg);}
.bakerypos .block.b6{z-index: 9;padding-bottom: 0;}
.bakerypos .block.b6::before {padding-top: 52.08%; background-image: url(../Images/bgCurve/beverage_yellow.svg);}
.bakerypos .block.b6a{ z-index: 10;}
.bakerypos .block.extra {padding: 0 0 var(--pd2) 0;}
.bakerypos .block.b7 {z-index: 9;}
.bakerypos .block.b7::before {background-image: url(../Images/bgCurve/beverage_grey.svg);}
.bakerypos .block.b8 {z-index:11;}

/* consultBanner */
.bakerypos .consultBanner{background-image: url(../Images/industry/bakerypos/consult_banner.jpg);}

/* 為什麼 */
.bakerypos .b1 .articalList li img{margin-bottom: 1rem; cursor: pointer;}

/* 掌握經營痛點 b2 */
.bakerypos .listStyle01 { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;justify-content: space-around; padding: 2rem;}
.bakerypos .listStyle01 ul li:first-child{ width:30%; }
.bakerypos .listStyle01 b{ margin-bottom: 0.7rem;}
.bakerypos .listStyle01 p{ font-size:22px;font-weight: 600;margin-bottom: 0.3rem;}

/* 涵蓋複合店 b3 */
.bakerypos .block.b3a.extra {padding: 0 0 var(--pd2) 0;}

/* 7 大烘焙營運功能 b4*/
.bakerypos.s2 .b4 a.anchor  {transform: translateY(-320px);}

.bakerypos h5.title { margin-bottom: 0;}

.bakerypos .tab-list{ width: 100%; text-align: center; font-size: 0; padding: 1rem 0;}
.bakerypos .tab-list div{ display: flex; justify-content: center; margin-bottom: 0.8rem;}

.bakerypos .tab-txt{ display: flex;justify-content: space-evenly; width: 100%; text-align: center; }
.bakerypos .tab-list{border-bottom: solid 2px var(--sec02);margin-bottom: 4rem;}
.bakerypos .tab-list a{ white-space: nowrap; width:260px; display: inline-block; font-size: var(--fsP); font-weight: 500; color: #000; padding: 8px 20px; margin: 5px 10px; border-radius: 10px; transition: .3s; background-color: rgba(255, 255, 255, .3); box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}

.bakerypos .tab-list a:hover,
.bakerypos .t1 .tab-list a.t1,
.bakerypos .t2 .tab-list a.t2,
.bakerypos .t3 .tab-list a.t3,
.bakerypos .t4 .tab-list a.t4,
.bakerypos .t5 .tab-list a.t5,
.bakerypos .t6 .tab-list a.t6,
.bakerypos .t7 .tab-list a.t7{ background-color: var(--sec02); color: #FFF;}

.bakerypos .tab-txt .page{ display: none;}
.bakerypos .t1 .tab-txt .page.t1,
.bakerypos .t2 .tab-txt .page.t2,
.bakerypos .t3 .tab-txt .page.t3,
.bakerypos .t4 .tab-txt .page.t4,
.bakerypos .t5 .tab-txt .page.t5,
.bakerypos .t6 .tab-txt .page.t6,
.bakerypos .t7 .tab-txt .page.t7{ width: 100%;display: flex;justify-content: space-evenly; align-items: center;align-items: flex-start;margin-bottom: 3rem;}

.bakerypos .r3 .intro{ text-align: center; margin: 4rem 0;}
.bakerypos .r3 .intro b{display: block;font-size: var(--fsM) ;font-weight: 500; color:#BE6EA1; font-family:'Noto Sans TC';}
.bakerypos .r3 .intro p{ font-size: var(--fsP); font-weight: 400; color: var(--com02);}

.bakerypos .tab-intro .intro{ display: none;}
.bakerypos .t1 .tab-intro .intro.t1,
.bakerypos .t2 .tab-intro .intro.t2,
.bakerypos .t3 .tab-intro .intro.t3,
.bakerypos .t4 .tab-intro .intro.t4,
.bakerypos .t5 .tab-intro .intro.t5,
.bakerypos .t6 .tab-intro .intro.t6,
.bakerypos .t7 .tab-intro .intro.t7{ display: block; text-align: center; font-size: var(--fsP); font-weight: 500; color: var(--com02);}

.bakerypos .tab-txt .page img{ width: 50%;border-radius: 25px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.bakerypos .tab-txt .page .group{ width: 50%; padding-left: var(--pd2);}
.bakerypos .tab-txt .page .group h5.title {margin-bottom: 2rem;}
.bakerypos .tab-txt .page .group h5.title .ch { font-size: var(--fsM2); font-weight: 500; line-height: 1.4;}
.bakerypos .tab-txt .page .group h5.title .ch span{ font-size: var(--fsS); font-weight: 400;margin: 0 0 0 0.8rem; color: var(--com02);}
.bakerypos .tab-txt .page .group h5.title .note{ font-size: var(--fsP); font-weight: 400; margin-top: 1.5rem;color: var(--com02);line-height: 1.5;}
.bakerypos .tab-txt .page .group h5.title .highlight{ font-size: var(--fsP);font-weight: 400; margin-top: 1rem;color: var(--sec02);}
.bakerypos .tab-txt .page .group h5,
.bakerypos .tab-txt .page .group ul,
.bakerypos .tab-txt .page .group li{ text-align: left; font-size: var(--fsP);}/*width: 95%; */
.bakerypos .tab-txt .page .group li span{ display: inline-block; vertical-align: top;}
.bakerypos .tab-txt .page .group .item h5{font-size: var(--fsM); padding: 1.5rem 0; border-bottom: 1px solid var(--sec02);}
.bakerypos .tab-txt .page .group .item.on h5{ border-bottom: 1px solid #fff;}

.bakerypos .tab-txt .page .group h5 b.UI{ display: flex;align-items:center; font-size: var(--fsM); font-weight: 500;}
.bakerypos .tab-txt .page .group h5 b.UI::before{display: inline-block; vertical-align: bottom; padding: 0 1rem; color: var(--sec03);}
.bakerypos .tab-txt .page .group h5 b.UI.down::before{ color: var(--com03);margin-right:0;transform: rotate(-90deg); }

.bakerypos .tab-txt .page .group ul{ padding: 1.5rem 0;}
.bakerypos .tab-txt .page .group li{ position: relative; padding: 4px 0;color: var(--com02);padding-left:2.5rem;display: block;}

.bakerypos .tab-txt .page .group li::before { content: '';width: 6px; height: 6px; background-color: var(--sec02); border-radius: 50%; position: absolute; top: calc(var(--fsM) / 2); left: 10px;}
.bakerypos .tab-txt .page .group li b{ font-weight: 600;}

.bakerypos .tab-txt .page .group .item ul { display: none; }
.bakerypos .tab-txt .page .group .item.on ul { display: block; }

.bakerypos .tab-txt .page .group .item h5 {color: var(--com03);cursor: pointer;}
.bakerypos .tab-txt .page .group .item.on h5 {color: #000;padding: 1.5rem 0 0 0;}
.bakerypos .tab-txt .page .group .item.on h5 b.UI::before { color:var(--sec03);}
.bakerypos .tab-txt .page .group .item.on h5 b.UI.down::before { transform: rotate(0deg); color: #000;}

.bakerypos .tab-txt .page .list{ border-top: 2px solid var(--sec02); text-align: left; width: 100%;}
.bakerypos .tab-txt .page .group h5 a{ font-size: var(--fsS); color: #FFF; background-color: var(--sec02); border-radius: 30px; padding: 8px 20px; margin-left: 20px; vertical-align: middle; transition: .3s;}
.bakerypos .tab-txt .page .group h5 a:hover{ background-color: var(--sec03); filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));}
.bakerypos .tab-txt .page .list h5{display: flex; align-items: flex-end;justify-content: space-between;}


/* 客戶證言 */
.bakerypos .b3 .album01 {display: block; font-size: 0; text-align: center;margin: 0 0 5rem 0;}
.bakerypos .b3 .album01 a.UI{ margin-top: -60px; font-size: var(--fsXL); color: var(--sec04); width: 60px; height: 60px; background-color: #FFF; border-radius: 50%; position: relative; transition: .3s; border: 2px solid var(--sec05); vertical-align: middle;}
.bakerypos .b3 .album01 a.UI::before{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.bakerypos .b3 .album01 a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}

.bakerypos .b3 .album01 .list{ left: 0;display: inline-block; vertical-align: middle; margin: 0 10px; position: relative; width: calc(100% - 70px*2); padding: 25px 0; white-space: nowrap; overflow: hidden;}

.bakerypos .b3 .album01 .item li {position: relative; z-index: 2; display: inline-block; width: 100%; padding: 0 45px;}
.bakerypos .b3 .album01 .item { left:0px; width: calc(50% - var(--pd2)); border-radius: 40px; width: 100%; text-align: center; height: 250px; white-space: normal; display: flex; flex-direction: column; position: relative;font-size: var(--fsM); display: inline-block;  width: calc(100% / 1);  vertical-align: top; padding: 40px 15px;margin: 3rem 0;} /* width: calc(100% / 3);*/
.bakerypos .b3 .album01 .item::after { content: '';position: absolute; left:0; top: 0; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left2.svg),url(../Images/industry/beverage/dialog_frame_right2.svg); background-repeat: no-repeat, no-repeat; background-position: center left, center right; background-size: auto 100%, auto 100%;}
.bakerypos .b3 .album01 .item .group{height: 100%; display: flex; flex-direction: column;justify-content: center;}
.bakerypos .b3 .album01 .item li.a2 {display: flex; position: relative; align-items: center; font-size: var(--fsM); font-weight: 600; text-align: left; margin-bottom: 30px; margin-top: -36px;}/* margin-bottom: 30px; margin-top: -36px; */
.bakerypos .b3 .album01 .item li.a2 .logo,
.bakerypos .b3 .album01 .item li.a4 .photo{ display: inline-block; vertical-align: middle; width: 72px; height: 72px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center;}
.bakerypos .b3 .album01 .item li.a2 .logo { aspect-ratio: 1 / 1; background-color: #F4F1EB; border: 1px solid rgb(133, 129, 126); background-size:65%;}
.bakerypos .b3 .album01 .item li span{padding:1rem; white-space: nowrap;}
.bakerypos .b3 .album01 .item li.a2 span{background-color: #F4F1EC;}
.bakerypos .b3 .album01 .item li.a4 span{background-color: #F3F0EB;}

.bakerypos .b3 .album01 .item li.a3 { font-size: var(--fsP); font-weight: 400; text-align: left; margin-bottom: var(--pdq); position:relative;}
.bakerypos .b3 .album01 .list li.a3:first-letter { padding-left: 30px;}
.bakerypos .b3 .album01 .list li.a3::before,
.bakerypos .b3 .album01 .list li.a3::after{color: var(--sec02); font-size: var(--fsXL2); line-height: 1; position: absolute;}
.bakerypos .b3 .album01 .list li.a3::before {content:'“';}
.bakerypos .b3 .album01 .list li.a3::after {content:'”';}
.bakerypos .b3 .album01 .list li.a4 { font-size: var(--fsP); text-align: right; margin-bottom: -65px;}
.bakerypos .b3 .album01 .item li.a4 .photo {background-image: url(../Images/industry/beverage/default_people.jpg);}
.bakerypos .b3 .album01 .list li.a5 { margin-bottom:var(--pdq);}
.bakerypos .b3 .album01 .list li.a5 a.btn {font-size: var(--fsS); background-color: var(--sec01); font-weight: 500; padding: 7px 15px;}
.bakerypos .b3 .album01 .pager{ position: absolute; left: 0px; bottom: 0px; width: 100%; text-align: center; }
.bakerypos .b3 .album01 .pager a{ background-color: #D9D9D9; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; transition: .3s;}
.bakerypos .b3 .album01 .pager a.focus,
.bakerypos .b3 .album01 .pager a:hover{ transform: scale(1.3); background-color: var(--sec02); border-color: #FFF; }


/* 打造烘焙品牌的全通路引擎 */
.bakerypos .pointer-map{ width: 100%; position: relative; background: url(../Images/industry/bakerypos/b5.png) no-repeat center; background-size: contain; font-size: 0;}
.bakerypos .pointer-map .bg{ padding-top: 45.522%;}
.bakerypos .pointer-map a.pointer::after{ content: ''; left: 0; top: 0;background-color: rgba(255, 229, 253, 0.8); }
.bakerypos .pointer-map a.pointer b{left: 0; top: 0;}

.bakerypos .pointer-map a.pointer.m1,
.bakerypos .pointer-map > dl.m1{top: 34%; left: 22%;}
.bakerypos .pointer-map a.pointer.m2,
.bakerypos .pointer-map > dl.m2{top: 67%; left: 24%;}
.bakerypos .pointer-map a.pointer.m3,
.bakerypos .pointer-map > dl.m3{top: 16%; left: 41%;}
.bakerypos .pointer-map a.pointer.m4,
.bakerypos .pointer-map > dl.m4{top: 9%; left: 61%;}
.bakerypos .pointer-map a.pointer.m5,
.bakerypos .pointer-map > dl.m5{top: 41%; left: 40%;}
.bakerypos .pointer-map a.pointer.m6,
.bakerypos .pointer-map > dl.m6{top: 55%; left: 46%;}
.bakerypos .pointer-map a.pointer.m7,
.bakerypos .pointer-map > dl.m7{top: 35%; left: 53%;}
.bakerypos .pointer-map a.pointer.m8,
.bakerypos .pointer-map > dl.m8{top: 60%; left: 72%;}
.bakerypos .pointer-map a.pointer.m9,
.bakerypos .pointer-map > dl.m9{top: 64%; left: 66%;}
.bakerypos .pointer-map a.pointer.m10,
.bakerypos .pointer-map > dl.m10{top: 25%; left: 87%;}

/* ============== Sitemap 網站地圖 ============== */
.sitemap {}
.sitemap h4.title{ font-size: var(--fsM2); text-align: left; padding-top: 4rem;}
.sitemap ul.maplist{ display: block; width: 100%; border-top: 1px solid #EBE6DC; border-bottom: 1px solid #EBE6DC;}
.maplist a{ display: block; color: #000; transition: .3s; cursor: pointer;}
.maplist a:hover{ color: var(--sec01)!important;}
.maplist li{display: block; padding: 0 .5rem; border-bottom: 1px solid #EBE6DC; font-size: 0;}
.maplist li:last-child{border-bottom: none;}
.maplist li > a{ font-size: var(--fsM); font-weight: 700; padding: 4rem 0;}
.maplist li > dl{ display: inline-block; width: calc(100% /3); vertical-align: top; padding-bottom: 4rem;}
.maplist li dt{font-size: var(--fsM); font-weight: 700; display: block; padding: 4rem 0 3rem; }
.maplist li dd{font-size: var(--fsP); font-weight: 400; width: 100%;}
.maplist li dd a{color: #595959; padding: .5rem 0;}
.maplist li dd a.sub{font-weight: 600; color: #3A3A3A;}
.maplist li dd a.page + a.sub{margin-top: 3rem;}
.maplist li dd a:not([href]){pointer-events: none; }
.maplist li dt + dt{ padding-top: 0;}





/* ============== ai 頁面 ============== */
.topbanner h2{margin-bottom: var(--pdh);}

.title3 { display: flex; flex-direction: column;  align-items: center;text-align: center;margin-bottom: var(--pd); }
.title3 h2{ font-size: var(--fsXL);  font-weight: 700; text-align: center; position: relative;display: block;line-height: 1.4;}
.title3 span.subtitle { text-align: center; color: #000; font-size: var(--fsM2); font-weight: 500;margin-top: var(--pdh); display: block; }
.title3 span.anchorname { font-size: var(--fsP) !important; display: inline-block; position: relative;margin-bottom: var(--pdh); font-weight: 400;color:#595959;}
.title3 span.anchorname::before,
.title3 span.anchorname::after { content: '';width: 80px;height: 0;border-bottom: 4px double var(--com03); position: absolute;top: 50%; margin-top: -2px;left: -100px;}
.title3 span.anchorname::after {left: auto;right: -100px;}

/* 跨區塊靜態漸層背景包覆區 */
.bg-gradient-section { background: var(--gradient21); width: 100%;}
.bg-gradient-section .block { background: transparent !important; padding: var(--pd2) 0; }


/* ============== ai-decision ============== */
/* ad1 / ad6 卡片上方圓形 */
.ai-decision .articalList.circle{font-size: 0; text-align: center;margin-bottom:2rem;}
.ai-decision .articalList.circle ul{ width: calc(100% / 4 - 40px); border: 2px solid #AC4EEA; vertical-align: middle; padding: 10rem 0.5rem 3rem 0.5rem; margin:8rem 1.5rem 1.5rem 1.5rem; vertical-align: top; background-color: #fff; border-radius: 20px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25); position: relative;}
.ai-decision .articalList.circle li{ width: 100%; font-size: var(--fsM); line-height: 1.4; text-align: center;}
.ai-decision .articalList.circle img{ max-width: 100%; display: inline-block;}
.ai-decision .articalList.circle .l1 img{ max-width: 75%; max-height: 80%; width: auto; height: auto; display: block; margin: auto;}
.ai-decision .articalList.circle li.l1{  padding: 0;}
.ai-decision .ad6 .articalList.circle li.l3{ font-size: var(--fsP); }

.ai-decision .articalList.circle{ position: relative;}
.ai-decision .articalList.circle .item{ display: inline;}

.ai-decision .articalList.circle .l1{ z-index: 1; position: absolute;top: -70px;left: 50%;transform: translate(-50%);text-align: center;width: 150px; height: 150px; background-color: #FFF;box-shadow: 0px 1px 8px rgba(0, 0, 0, .10);  border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.ai-decision .ad1 .articalList.circle li.l2{ white-space: nowrap; font-size: var(--fsM); display: inline-block; font-weight: 700; }
.ai-decision .ad1 .articalList.circle li.l3 {  font-size: var(--fsP);line-height: 1.6; display: block; padding-bottom:0;color:var(--com02);}/* height:calc(var(--fsP)*2*1.4); */
.ai-decision .ad1 .articalList.circle li.l3 b{font-size: var(--fsL); margin-left: 5px; display: inline-block;}
.ai-decision .ad1 .articalList.circle li.l2 div.pc { display: inline-block;}


/* ad2 智慧三層架構 */
.ad2 .title3 {margin-bottom: 7rem;}

.stepList { display: flex; justify-content: space-between; align-items: stretch; margin: 4rem auto; position: relative; }
.stepList .item { width: 100%; position: relative; background: #FFF; border-radius: 24px; padding: 8rem 4rem; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); box-sizing: border-box; overflow: visible; }

.stepList .item.i1 { border: 2px solid #FA5699; }
.stepList .item.i2 { border: 2px solid #A855F7; }
.stepList .item.i3 { border: 2px solid #00CDDC; }

.stepList .item .badge { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: fit-content; max-width: 90%; background: #FFF; border-radius: 40px; padding: 0.8rem 2rem; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; white-space: nowrap; z-index: 10; font-size: var(--fsM); font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-sizing: border-box; }
.stepList .item.i1 .badge { border: 2px solid #FA5699; color: #FA5699; }
.stepList .item.i2 .badge { border: 2px solid #A855F7; color: #A855F7; }
.stepList .item.i3 .badge { border: 2px solid #00CDDC; color: #00CDDC; }
.stepList .item .badge img { width: 3rem; height: 3rem; object-fit: contain; flex-shrink: 0; }

.stepList .item .info { position: relative; z-index: 3; text-align: left; }
.stepList .item .title { font-size: var(--fsM); font-weight: 700; color: #111; text-align: left; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 2px solid #E5E7EB; }
.stepList .item .txt { font-size: var(--fsP); font-weight: 500; line-height: 1.6; margin: 0; text-align: left; }

.stepList .item .num { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; }
.stepList .item .num::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center right; background-size: contain; }
.stepList .item.i1 .num::after { background-image: url(../Images/ui/numbers/Num-gd1.svg); }
.stepList .item.i2 .num::after { background-image: url(../Images/ui/numbers/Num-gd2.svg); }
.stepList .item.i3 .num::after { background-image: url(../Images/ui/numbers/Num-gd3.svg); }

.stepList .item:not(:last-child)::after { content: ''; position: absolute; right: -17px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 30px; height: 30px; background: #FFF; border-top: 2px solid; border-right: 2px solid; z-index: 5; }
.stepList .item.i1::after { border-color: #FA5699; }
.stepList .item.i2::after { border-color: #A855F7; }


/* ad3 intro */
.ai-decision .block p {font-size: var(--fsM); font-weight: 500; text-align: center; margin-bottom: 2rem; display:block;}

.ai-decision .ad3 .intro li {font-size: var(--fsM); font-weight: 500;  text-align: center; margin-bottom: 2rem; display:block;}
.ai-decision .ad3 .intro li span{font-weight:300;}
.ai-decision .ad3 .intro{text-align: center; font-size: var(--fsP); margin-bottom: 2rem;}
.ai-decision .ad3 .intro span.arrow{ margin: 0 1rem; display: inline-block; transition: transform 0.3s; }
.ai-decision .ad3 .intro>p {color: #000;}
.ai-decision .ad3 .intro li:nth-child(2) {color: #FA5699;}
.ai-decision .ad3 .intro span.highlight{display: inline-block;font-size: var(--fsP); font-weight: 600; color: #FA5699; border-radius: 100px; padding: 0.8rem 3rem; background: linear-gradient(90deg, #FEEDF5 0%,#F5EEFD 50%, #E4F7FC 100%);filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));}
.ai-decision .ad3 .intro span.highlight span{ font-weight: inherit; }
.ai-decision .ad3 .intro span.highlight-none{ display: inline-block;font-size: var(--fsS); font-weight: 400; color:var(--com02); text-decoration: line-through; border-radius: 100px; padding: 0.8rem 3rem; background-color: var(--com04); }


/* ad3 ai tableSet */
.ai.tableSet { margin-bottom: 4rem;text-align: center; width: 100%; background-color: #fff; font-size: var(--fsS); border: solid 1px var(--com03); border-radius: 20px; overflow: hidden; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25); }
.ai.tableSet li {vertical-align: middle; padding: 2rem; font-size: var(--fsP); border-right: solid 1px var(--com03);  }
.ai.tableSet li span { display: block; text-align: left; font-weight: 400; }

/* 表頭 Icon */
.ai.tableSet ul:nth-child(1) li:nth-child(2) b.company,
.ai.tableSet ul:nth-child(1) li:nth-child(3) b.wixtarai { display: inline-block; width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-right: 6px; }
.ai.tableSet ul:nth-child(1) li:nth-child(2) b.company { background-image: url(../Images/product/ai-decision/ad3-1.svg); }
.ai.tableSet ul:nth-child(1) li:nth-child(3) b.wixtarai { background-image: url(../Images/product/ai-decision/ad3-2.svg); }
.ai.tableSet ul:nth-child(1) li b,
.ai.tableSet ul:nth-child(1) li >span {vertical-align: middle;}

/* 三欄寬度與文字排版 (20% / 35% / 45%) */
.ai.tableSet ul li:nth-child(1) { width: 20%; background-color: #FBDDED; font-size: var(--fsM); font-weight: 600; text-align: center; }
.ai.tableSet ul li:nth-child(2) { width: 35%; text-align: left; font-weight: 600; font-size: var(--fsP); color: var(--com03); border-right: none; }
.ai.tableSet ul li:nth-child(3) { width: 45%; text-align: left; font-weight: 600; font-size: var(--fsM); color: #FA5699; border-right: none; box-shadow: -8px 0 16px rgba(169, 78, 233, 0.2); }
.ai.tableSet ul li:nth-child(3) span { color: #000; font-size: var(--fsP); font-weight: 400; }

/* 第一列 (表頭列) */
.ai.tableSet ul:nth-child(1) li { text-align: center;  }
.ai.tableSet ul:nth-child(1) li span { display: inline-block; color: #FFF; font-size: var(--fsM); font-weight: 500; }
.ai.tableSet ul:nth-child(1) li span.br.mobile { font-weight: 400; }

.ai.tableSet ul:nth-of-type(even) li:nth-child(1) { background-color: #fff; }
.ai.tableSet ul:nth-of-type(even) li:nth-child(2) { background-color: #FDFDFD; }
.ai.tableSet ul:nth-child(2n-1) li:nth-child(2) { background-color: #F0F0F0; }
.ai.tableSet ul:nth-child(2n-1) li:nth-child(3) { background: linear-gradient(90deg, #FBDDED 0%, #E1E6FA 50%, #CFF5F9 100%); }
.ai.tableSet ul:nth-child(1) li:nth-child(2) { background-color: #7D7D7D !important; }
.ai.tableSet ul:nth-child(1) li:nth-child(3) { background: linear-gradient(90deg, #C751CE 0%, #AD4EE9 50%, #6973FF 100%); }

.ai.tableSet ul:nth-child(1) li:nth-child(3).company::before { background-image: url(../Images/product/ai-decision/ad3-1.svg); }
.ai.tableSet ul:nth-child(1) li:nth-child(3).wixtarai::before { width: 26px; height: 26px; background-image: url(../Images/product/ai-decision/ad3-2.svg); }


/* ad4 多角色營運效益 共用 */
.ai-decision .ad4 { position: relative; }
.ai-decision .ad4::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: -1; pointer-events: none; background-image: url(../Images/product/ai-decision/bg-dialogue.svg); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; }

.roleList .item { display: flex; align-items: center; gap: 2.5rem;margin-bottom: 4rem; }

.roleList .dialogbox { padding:3rem; display: flex; align-items: center; justify-content: space-between; border: 2px solid transparent; background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(90deg, #C751CE 0%, #AC4EEA 50%, #6774FF 100%) border-box; border-radius: 25px; box-shadow: 0px 8px 30px rgba(172, 78, 234, 0.08); }

.roleList .dialogbox .info { flex: 1; text-align: left; display: flex; flex-direction: column; justify-content: center; padding-right: 5rem; }
.roleList .item.i2 .dialogbox .info { padding-right: 0; padding-left: 5rem; }
.roleList .item.i1 .dialogbox .dialogue li,
.roleList .item.i3 .dialogbox .dialogue li {text-align: right; }
.roleList .item.i2 .dialogbox .dialogue li{ text-align: left;}

.roleList .dialogbox .info li.l1 { font-size: var(--fsM2); font-weight: 700; margin-bottom: 1rem; }
.roleList .item.i1 .info li.l1 { color: #FA5699; }
.roleList .item.i2 .info li.l1 { color: #AC4EEA }
.roleList .item.i3 .info li.l1 { color: #6774FF; }
.roleList .dialogbox .info li.l2 { font-size: var(--fsM); font-weight: 600; color: #000; margin-bottom: 1rem; }
.roleList .dialogbox .info li.l3 { font-size: var(--fsP); color: var(--com02); line-height: 1.5; padding-left: 2rem; border-left: 3px solid #DDD; }
.roleList .dialogbox .dialogue { width: 45%; min-height: 120px; background: linear-gradient(180deg, #C551D0 0%, #AC4EEA 100%); color: #FFF; display: flex; align-items: center; justify-content: center; padding: 2rem 3.5rem ; box-shadow: 0px 6px 20px rgba(133, 46, 207, 0.25);  border-radius: 100px 100px 0 100px; }
.roleList .item.i2 .dialogbox .dialogue { border-radius: 100px 100px 100px 0; }
.roleList .dialogbox .dialogue li { font-size: 20px; font-weight: 400; line-height: 1.6; }
.roleList img { width: 250px; }


/* ad5 tab-switch 核心效益對比 */
.ai-decision .ad5 .tab-list{ width: 100%; text-align: center; font-size: 0; padding: 1rem 0;}
.ai-decision .ad5 .tab-list div{ display: flex; justify-content: space-evenly; margin-bottom: 0.8rem;}

.ai-decision .ad5 .tab-txt{ display: flex;justify-content: space-evenly; width: 100%; text-align: center; }
.ai-decision .ad5 .tab-list{border-bottom: solid 2px #FA5699;margin-bottom: 4rem;}
.ai-decision .ad5 .tab-list a{ white-space: nowrap; width:200px; display: inline-block; font-size: var(--fsM); font-weight: 500; color: #000; padding: 8px 20px; margin: 5px 10px; border-radius: 10px; transition: .3s; background-color: rgba(255, 255, 255, .3); box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}

.ai-decision .ad5 .tab-list a:hover,
.ai-decision .ad5 .t1 .tab-list a.t1,
.ai-decision .ad5 .t2 .tab-list a.t2,
.ai-decision .ad5 .t3 .tab-list a.t3{ background-color: #FA5699; color: #FFF;}

.ai-decision .ad5 .tab-txt .page{ display: none;}
.ai-decision .ad5 .t1 .tab-txt .page.t1,
.ai-decision .ad5 .t2 .tab-txt .page.t2,
.ai-decision .ad5 .t3 .tab-txt .page.t3{display: flex;justify-content:space-between; align-items: center;align-items: flex-start;margin-bottom: 5rem;}

.ai-decision .ad5 .tab-intro .intro{ display: none;}
.ai-decision .ad5 .t1 .tab-intro .intro.t1,
.ai-decision .ad5 .t2 .tab-intro .intro.t2,
.ai-decision .ad5 .t3 .tab-intro .intro.t3{ display: block; text-align: center; font-size: var(--fsP); font-weight: 500; color: var(--com02);}

.ai-decision .ad5 .page .tab-pic li{ display: none;}
.ai-decision .ad5 .page.p1 .tab-pic li.p1,
.ai-decision .ad5 .page.p2 .tab-pic li.p2,
.ai-decision .ad5 .page.p3 .tab-pic li.p3,
.ai-decision .ad5 .page.p4 .tab-pic li.p4,
.ai-decision .ad5 .page.p5 .tab-pic li.p5,
.ai-decision .ad5 .page.p6 .tab-pic li.p6,
.ai-decision .ad5 .page.p7 .tab-pic li.p7,
.ai-decision .ad5 .page.p8 .tab-pic li.p8,
.ai-decision .ad5 .page.p9 .tab-pic li.p9,
.ai-decision .ad5 .page.p10 .tab-pic li.p10,
.ai-decision .ad5 .page.p11 .tab-pic li.p11,
.ai-decision .ad5 .page.p12 .tab-pic li.p12{display: inline-block; text-align: center;}

.ai-decision .ad5 .tab-pic{ display: inline-block; overflow: hidden;white-space: nowrap;width: 92%; font-size: 0; border-radius: 25px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25);}
.ai-decision .ad5 .tab-pic ul {position: relative; width: 100%;height: 100%;display: inline-block;}
.ai-decision .ad5 .tab-pic img { width: 100%;display: block;}

.ai-decision .ad5 .tab-txt .page .group{ width: 100%; padding-left: var(--pd2);}
.ai-decision .ad5 .tab-txt .page .group h5.title {margin-bottom: 2rem;padding-bottom:2rem; border-bottom: 2px solid #FA5699;}
.ai-decision .ad5 .tab-txt .page .group h5.title .ch { font-size: var(--fsXL); font-weight: 600; line-height: 1.4; text-align: left;display: flex;align-items: baseline;gap:1rem;margin-bottom:1rem}
.ai-decision .ad5 .tab-txt .page .group h5.title .ch span{ color: #FA5699;font-size: var(--fsM);font-weight: 500;}
.ai-decision .ad5 .tab-txt .page .group .en { font-size: var(--fsP); font-weight: 400; line-height: 1.4;text-align: left;text-transform:none;display: block; margin-bottom: 0;}
.ai-decision .ad5 .tab-txt .page .group li{ text-align: left; font-size: var(--fsP);}
.ai-decision .ad5 .tab-txt .page .group li span{ display: inline-block; vertical-align: top;}
.ai-decision .ad5 .tab-txt .page .group .item h5{font-size: var(--fsM); padding: 1.5rem 0; border-bottom: 1px solid var(--sec02);}

.ai-decision .ad5 .tab-txt .page .group .list li{ font-size: var(--fsM);font-weight: 500;position: relative; padding: 0 0 15px 0;color: #000;padding-left:3rem;display: block;}
.ai-decision .ad5 .tab-txt .page .group .list li::before { content: '';width: 10px; height: 10px; background-color: var(--com04); border-radius: 50%; position: absolute; top: calc(var(--fsM) / 2); left: 10px;}
.ai-decision .ad5 .tab-txt .page .group .list li:hover::before{ background-color:#FA5699;}
.ai-decision .ad5 .tab-txt .page .group .list li.focus::before{ background-color:#FA5699;}
.ai-decision .ad5 .tab-txt .page .group .list b{ font-size: 24px; font-weight: 500; }
.ai-decision .ad5 .tab-txt .page .group .list span{ font-size: var(--fsP);font-weight: 400;color:#595959; display: block; margin-top: 0.5rem;line-height: 1.7;}

.ai-decision .ad5 .tab-txt .page .list{ text-align: left; width: 100%;}
.ai-decision .ad5 .tab-txt .page .group h5 a{ font-size: var(--fsS); color: #FFF; background-color: var(--sec02); border-radius: 30px; padding: 8px 20px; margin-left: 20px; vertical-align: middle; transition: .3s;}
.ai-decision .ad5 .tab-txt .page .group h5 a:hover{ background-color: var(--sec03); filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));}
.ai-decision .ad5 .tab-txt .page .list h5{display: flex; flex-direction: column;align-items: baseline;}
.ai-decision .ad5 .tab-txt .page .list li { display: block; cursor: pointer;}


/* ad6 智慧三層架構 */
.ai-decision .ad6 .articalList.circle ul{ width: calc(100% / 6 - 40px);padding: 5.5rem 1rem 2.5rem 1rem; margin: 5rem 2rem 2.5rem 2rem;background-color: #fff;border: 2px solid #B070EE;}
.ai-decision .ad6 .articalList.circle .item:not(:first-child) ul::after{ content: ''; position: absolute; left: -2rem; top: 45%; transform: translateX(-50%); width: 22px; height: 18px; background-image: url(../Images/product/ai-decision/ad6-arrow.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
.ai-decision .ad6 .articalList.circle .l1{top: -50px;}
.ai-decision .ad6 .articalList.circle .l1 img{ max-width: 100%; max-height: 100%;}
.ai-decision .ad6 .articalList.circle .l1{ width: 90px; height: 90px;}
.ai-decision .ad6 .articalList.circle li.l3 {display: block; }/* height:calc(var(--fsP)*2*1.4);  */

.ai-decision .ad6 li.head::before { content: 'done'; left: 0; top: calc(var(--fsP) / 2 + -1px); font-size: 14px;width: auto;height: auto;color: #FFF; padding: 2px;border-radius: 50%;background-color: #FA5699;position: absolute;}
.ai-decision .ad6 li.head { position:relative;padding: 0px 0 10px 30px; font-size: var(--fsP); font-weight: 400;display: block; }
.ai-decision .ad6 li.head b{ font-size: var(--fsM); font-weight: 500; margin-right: 1rem; display: inline-block; }
.ai-decision .ad6 ul.list{ display: flex; flex-direction: column; align-items: center;justify-content: center;align-items: flex-start;padding:0 2rem; }
.ai-decision .ad6 .group{ display: flex; flex-direction: column; align-items: center;justify-content: center;align-items: center; }
	

/* ad7 可量化效益 */
.ai-decision .articalList { margin-bottom: 4rem;}
.ai-decision .articalList ul{ width: calc(100%/5 - 40px); text-align: left; vertical-align: middle; margin: 20px; vertical-align: top; position: relative;}
.ai-decision .articalList li.l3 {line-height: 1.5;}
.ai-decision .articalList li.l3 b{font-size: var(--fsP); font-weight: 700;margin-left: 5px; display: inline-block;}
.ai-decision .articalList li img{ max-width: 90%;}
.ai-decision .articalList li.l1{ line-height: inherit;}
.ai-decision .ad7 p{ text-align: center;color: var(--com03);font-weight: 400;font-size: var(--fsP); }

.ad7 .articalList li.l1{ padding-bottom: 2rem; }
.ad7 .articalList li.l2{ font-size: var(--fsM2);}
.ad7 .articalList b.l4 { display: inline-flex; align-items: stretch; justify-content: center; color: #CA1E1D !important;width: 100%; white-space: nowrap;font-size: var(--fsM2); font-weight: 700; font-style: normal; line-height: 1.2; margin: 0.5rem 0; gap: 1rem; }
.ad7 .articalList b.l4::before { content: ''; display: inline-block; width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.ad7 .articalList b.l4.up::before { background-image: url(../Images/product/ai-decision/icon_increase.svg); }
.ad7 .articalList b.l4.down::before { background-image: url(../Images/product/ai-decision/icon_increase.svg); transform: rotate(180deg); }
.ad7 .articalList b.l4.save::before { width: 32px; height: 32px; background-image: url(../Images/product/ai-decision/icon_save.svg); }


/* ad8 為什麼選擇 WiXtar */
.ai-decision .listStyle01{gap:2rem; padding:2rem 0}
.ai-decision .listStyle01 ul li:first-child{width:35%; margin-right: 30px;}
.ai-decision .listStyle01 ul li:last-child{width:100%; padding:10px 0px 10px 30px;}
.ai-decision .listStyle01 b{ margin-bottom: 0.5rem;}


.ai-decision .consultBanner{background-image: url(../Images/product/ai-decision/consult_banner.jpg);}






/* ============== ai-patrol ============== */
.ai-patrol .btnbox {margin-top: var(--pd);}
.ai-patrol .block p {font-size: var(--fsP); font-weight: 400; text-align: center; display:block;color: var(--com03);}

.ai-patrol .consultBanner{background-image: url(../Images/product/ai-patrol/consult_banner.jpg);}

.ai-patrol .ap1 .item { position: relative; width: calc(100%/3 - 30px); font-size: 0; filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3));margin: 15px; }
.ai-patrol .ap1 .item img { width: 100%; height: auto;display: block; position: relative;border-radius:30px;}
.ai-patrol .ap1 .item::after{ content: "";  border-radius:30px; display: block; width: 100%; height: 100%;  z-index: 1; position: absolute; top: -1px; background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 0) 90%) ;opacity: 0.6; z-index: 1;}
.ai-patrol .ap1 .item:nth-child(1)::after{background:none;}
	
.ai-patrol .ap1 .group { display: flex; flex-wrap: wrap;}
.ai-patrol .ap1 .group .name { width: 100%;padding: 3rem 4rem;position: absolute; top: 10px;text-align: left; z-index: 2;left: 50%;transform: translateX(-50%);}
.ai-patrol .ap1 .name h5 {font-size:var(--fsXL);  color:#FFF; margin-bottom: 1.5rem;}
.ai-patrol .ap1 .name b { font-size:var(--fsP);font-weight: 400;color:#fff;margin-bottom: 1.2rem;display: block;}
.ai-patrol .ap1 .name p { font-size:var(--fsP);font-weight: 400;color:#fff;text-align:left; }

.ai-patrol .ap1 .btnbox {margin-top: var(--pd);}


/* ap2 門市營運痛點 */
.ai-patrol .ap2 .roleList .dialogbox .dialogue { width: 35%; color: var(--com02); background: linear-gradient(40deg, #FEEDF5 0%, #F5EEFD 40%, #E4F7FC 100%); box-shadow: 0px 6px 20px rgba(133, 46, 207, 0.05); }
.ai-patrol .ap2 .roleList .dialogbox .info{padding-right: 4rem;}
.ai-patrol .ap2 .roleList .dialogbox .dialogue li{font-size: var(--fsP);}
.ai-patrol .ap2 .roleList .dialogbox .info li.l3{ color: #000;}
.ai-patrol .ap2 .roleList .item.i2 .dialogbox .info{padding-right: 0rem;}
.ai-patrol .ap2 .roleList .item .info li.l1 { margin-bottom: 1.5rem;}

/* ap3 智慧巡檢架構 */
.ai-patrol .ap3 { padding: var(--pd2) 0; }
.ai-patrol .ap3 .group { display: flex; align-items: stretch; justify-content: space-between; gap: 1.2rem; margin-top: 4rem; position: relative; }
.ai-patrol .ap3 .group .item { flex: 1; min-height: 520px; border-radius: 24px; background: #000000; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem 2.2rem 2.2rem 2.2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.ai-patrol .ap3 .group .item .bgImg { position: absolute; top: 0; left: 0; width: 100%; height: 60%; object-fit: cover; z-index: 1; border-top-left-radius: 24px; border-top-right-radius: 24px; }
.ai-patrol .ap3 .group .item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 1) 100%); z-index: 2; pointer-events: none; }
.ai-patrol .ap3 .group .item::after { content: ''; position: absolute; bottom: 205px; right: 6px; width: 170px; height: 220px; background-repeat: no-repeat; background-position: center bottom; background-size: contain; z-index: 3; pointer-events: none; opacity: 0.85; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 65%, rgba(0,0,0,0.02) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 65%, rgba(0,0,0,0.02) 100%); }
.ai-patrol .ap3 .group .item.i1::after { background-image: url(../Images/ui/numbers/Num-gd1.svg); }
.ai-patrol .ap3 .group .item.i2::after { background-image: url(../Images/ui/numbers/Num-gd2.svg); }
.ai-patrol .ap3 .group .item.i3::after { background-image: url(../Images/ui/numbers/Num-gd3.svg); }
.ai-patrol .ap3 .group .item .header { position: relative; z-index: 4; text-align: left; color: #FFFFFF; margin-top: auto; margin-bottom: 1.2rem; padding: 0 2rem;}
.ai-patrol .ap3 .group .item .header h3.title { display: block ; font-size: var(--fsL) !important; font-weight: 600 !important; letter-spacing: 2px; color: #FFFFFF ; margin-bottom: 0.5rem!important; }
.ai-patrol .ap3 .group .item .header h4.sub { font-size: var(--fsM) ; font-weight: 400; color: #FFFFFF;  margin-bottom: 1rem;}
.ai-patrol .ap3 .group .item .descBox { position: relative; z-index: 4; border-radius: 20px; padding: 2rem 1.8rem; min-height: 200px; display: flex; align-items: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ai-patrol .ap3 .group .item .descBox p { font-size: var(--fsP); font-weight: 400; line-height: 1.6; color: #FFFFFF; margin: 0; text-align: left; }
.ai-patrol .ap3 .group .item .descBox p a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;display: inline; }
.ai-patrol .ap3 .group .item.i1 .descBox { background: rgba(158, 42, 90, 0.55); border: 1px solid rgba(255, 120, 170, 0.35); }
.ai-patrol .ap3 .group .item.i2 .descBox { background: rgba(78, 33, 120, 0.55); border: 1px solid rgba(180, 120, 255, 0.35); }
.ai-patrol .ap3 .group .item.i3 .descBox { background: rgba(14, 118, 132, 0.55); border: 1px solid rgba(60, 210, 230, 0.35); }
.ai-patrol .ap3 .group .stepArrow { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 65px; text-align: center; gap: 0.8rem; z-index: 5; }
.ai-patrol .ap3 .group .stepArrow .arrowIcon { width: 20px; height: 34px; background-color: #FA5699; -webkit-mask: url(../Images/product/ai-decision/icon_increase.svg) no-repeat center / contain; mask: url(../Images/product/ai-decision/icon_increase.svg) no-repeat center / contain; transform: rotate(90deg); display: block; }
.ai-patrol .ap3 .group .stepArrow span { font-size: var(--fsP); font-weight: 600; text-align: center; width: 45px; }


/* ap4 全天候任務 */
.ai-patrol .tab-list { width: 100%; text-align: center; font-size: 0; padding: 1rem 0; border-bottom: solid 2px #FA5699; margin-bottom: 4rem; }
.ai-patrol .tab-list div { display: flex; justify-content: space-evenly; margin-bottom: 1rem; }
.ai-patrol .tab-list a { white-space: nowrap; width: 200px; display: inline-block; font-size: var(--fsM); font-weight: 500; color: #000; padding: 8px 20px; margin: 5px 10px; border-radius: 10px; transition: .3s; background-color: rgba(255, 255, 255, .3); box-shadow: 0px 1px 8px rgba(0, 0, 0, .25); }

.ai-patrol .tab-list a:hover,
.ai-patrol .t1 .tab-list a.t1,
.ai-patrol .t2 .tab-list a.t2,
.ai-patrol .t3 .tab-list a.t3,
.ai-patrol .t4 .tab-list a.t4,
.ai-patrol .t5 .tab-list a.t5,
.ai-patrol .t6 .tab-list a.t6,
.ai-patrol .t7 .tab-list a.t7 { background-color: #FA5699; color: #FFF; }

.ai-patrol .tab-txt { display: flex; justify-content: space-evenly; width: 100%; text-align: center; }
.ai-patrol .tab-txt .page { display: none; }
.ai-patrol .tab-txt .page .mob-title { display: none; }
.ai-patrol .t1 .tab-txt .page.t1,
.ai-patrol .t2 .tab-txt .page.t2,
.ai-patrol .t3 .tab-txt .page.t3,
.ai-patrol .t4 .tab-txt .page.t4,
.ai-patrol .t5 .tab-txt .page.t5,
.ai-patrol .t6 .tab-txt .page.t6,
.ai-patrol .t7 .tab-txt .page.t7 { width: 100%; display: flex; justify-content: space-evenly; align-items: center; margin-bottom: 3rem; }

.ai-patrol .r3 .intro { text-align: center; margin: 4rem 0; }
.ai-patrol .r3 .intro b { display: block; font-size: var(--fsM); font-weight: 500; color: #BE6EA1; font-family: 'Noto Sans TC'; }
.ai-patrol .r3 .intro p { font-size: var(--fsP); font-weight: 400; color: var(--com02); }

.ai-patrol .tab-intro .intro { display: none; }
.ai-patrol .t1 .tab-intro .intro.t1,
.ai-patrol .t2 .tab-intro .intro.t2,
.ai-patrol .t3 .tab-intro .intro.t3,
.ai-patrol .t4 .tab-intro .intro.t4,
.ai-patrol .t5 .tab-intro .intro.t5,
.ai-patrol .t6 .tab-intro .intro.t6,
.ai-patrol .t7 .tab-intro .intro.t7 { display: block; text-align: center; font-size: var(--fsP); font-weight: 500; color: var(--com02); }

.ai-patrol .tab-txt .page img { width: 50%; border-radius: 25px; box-shadow: 0px 1px 8px rgba(0, 0, 0, .25); }
.ai-patrol .tab-txt .page .group { width: 50%; padding-left: var(--pd2); }
.ai-patrol .tab-txt .page .group h5.title { margin-bottom: 2rem; }
.ai-patrol .tab-txt .page .group h5.title .ch { font-size: var(--fsXL); font-weight: 500; line-height: 1.4; text-align: left;}
.ai-patrol .tab-txt .page .group h5.title .ch span { font-size: var(--fsM); font-weight: 400; margin: 0 0 0 1.5rem; color: #FA5699; }
.ai-patrol .tab-txt .page .group h5.title .highlight { font-size: var(--fsP); font-weight: 400; margin-top: 1rem; color: #FA5699; }
.ai-patrol .tab-txt .page .group .item h5 { color: var(--com03); cursor: pointer; font-size: var(--fsM); padding: 1.5rem 0; border-bottom: 1px solid #FA5699; }
.ai-patrol .tab-txt .page .group .item.on h5 { color: #000; padding: 1.5rem 0 0 0; border-bottom: 1px solid #fff; }
.ai-patrol .tab-txt .page .group h5 b.UI { display: flex; align-items: center; font-size: var(--fsM); font-weight: 500; }
.ai-patrol .tab-txt .page .group h5 b.UI::before { display: inline-block; vertical-align: bottom; padding: 0 1rem; color: var(--sec03); }
.ai-patrol .tab-txt .page .group h5 b.UI.down::before { color: var(--com03); margin-right: 0; transform: rotate(-90deg); }
.ai-patrol .tab-txt .page .group li { position: relative; padding: 4px 0; color: var(--com02); padding-left: 2.5rem; display: block; font-size: var(--fsM); }
.ai-patrol .tab-txt .page .group li::before { content: ''; width: 6px; height: 6px; background-color: #FA5699; border-radius: 50%; position: absolute; top: calc(var(--fsL) / 2); left: 10px; }
.ai-patrol .tab-txt .page .group li b { font-weight: 600; }
.ai-patrol .tab-txt .page .group .item ul { display: none; }
.ai-patrol .tab-txt .page .group .item.on ul { display: block; }
.ai-patrol .tab-txt .page .group .item.on h5 b.UI::before { color: var(--sec03); }
.ai-patrol .tab-txt .page .group .item.on h5 b.UI.down::before { transform: rotate(0deg); color: #000; }
.ai-patrol .tab-txt .page .list { border-top: 2px solid #FA5699; text-align: left; width: 100%; padding: 0 1rem; }
.ai-patrol .tab-txt .page .group h5 a { font-size: var(--fsS); color: #FFF; background-color: #FA5699; border-radius: 30px; padding: 8px 20px; margin-left: 20px; vertical-align: middle; transition: .3s; }
.ai-patrol .tab-txt .page .group h5 a:hover { background-color: #FA5699; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3)); }
.ai-patrol .tab-txt .page .list h5 b { display: flex; align-items: flex-end; justify-content: space-between; padding: 2rem 0 1.6rem 0; font-size: var(--fsM2); font-weight: 500; }


/* ap6  產業應用場景 */
.ai-patrol .ap6 .item { position: relative; width: calc(50% - 30px);font-size: 0; filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3));margin: 15px; }
.ai-patrol .ap6 .item img { width: 100%; height: auto; display: block; position: relative; border-radius: 30px; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ai-patrol .ap6 .item::after{ content: "";  border-radius:30px; display: block; width: 100%; height: 95%;  z-index: 1; position: absolute; top: -1px; background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(255, 255, 255, 0) 80%) ; pointer-events: none; }

.ai-patrol .ap6 .group { display: flex; flex-wrap: wrap;}
.ai-patrol .ap6 .group .name { width: 100%; padding: 3rem; position: absolute; top: 10px; text-align: center; z-index: 2; left: 50%; transform: translateX(-50%); padding-top: 2rem; font-size: initial; user-select: text; -webkit-user-select: text; pointer-events: auto; cursor: text; }
.ai-patrol .ap6 .name h5 { font-size: var(--fsL); color: #FFF; margin-bottom: 1.8rem; user-select: text; -webkit-user-select: text; }
.ai-patrol .ap6 .name b { font-size: var(--fsP); font-weight: 400; color: #fff; margin-bottom: 1.2rem; display: block; user-select: text; -webkit-user-select: text; }
.ai-patrol .ap6 .name p { font-size: var(--fsP); font-weight: 300; color: #fff; user-select: text; -webkit-user-select: text; }
.ai-patrol .ap6 .name ::selection { background-color: rgba(250, 86, 153, 0.6); color: #ffffff; }
.ai-patrol .ap6 .name ::-moz-selection { background-color: rgba(250, 86, 153, 0.6); color: #ffffff; }


/* 共用 gradientCards 結構 */
.gradientCards { display: flex; align-items: center; justify-content: center;justify-content: space-evenly; gap: 3.5rem; position: relative; max-width: 1060px; margin: 6rem auto 6rem; }
.gradientCards .ampersand { font-size: var(--fsXL); font-weight: 400; color: #FA5699; padding: 0 1rem; }
.gradientCards .card, 
.gradientCards .card1, 
.gradientCards .card2 { width: 100%; max-width: 450px; border-radius: 25px; padding: 5.5rem 4rem 4rem 4rem;background-color: #fff; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); z-index: 2; }
.gradientCards .cardBadge { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #FFFFFF; border-radius: 50px; padding: 0.8rem 4.5rem; font-size: var(--fsM); font-weight: 700; white-space: nowrap; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); z-index: 5; }
.gradientCards .cardBadge span {font-size: var(--fsM2); background-image: linear-gradient(90deg, #FA5699 0%, #AC4EEA 100%);display: inline-block; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.gradientCards .pic{width: 70%;margin: auto;}
.gradientCards .cardBody{padding-top:3rem; margin-top:3rem; border-top: 1px solid var(--com03);}
.gradientCards .cardBody p.sub{font-size: var(--fsM);color: #000;}

/* ap7 彈性方案 */
.block.ap7 { padding: var(--pd2) 0; }
.ap7 .gradientCards { align-items: stretch; }
.ap7 .gradientCards .card1, 
.ap7 .gradientCards .card1 { background: linear-gradient(90deg, #FA5699 0%, #AC4EEA 100%); box-shadow: 0 10px 30px rgba(246, 56, 124, 0.25); }
.ap7 .card1 .cardBadge,
.ap7 .card2 .cardBadge { border: 1px solid #AC4EEA; }
.ap7 .card1 .cardBadge span { background-image: linear-gradient(90deg, #FA5699 0%, #AC4EEA 100%); }

.ap7 .gradientCards .card2 { background: linear-gradient(90deg, #AC4EEA 0%, #0BCDE0 100%); box-shadow: 0 10px 30px rgba(0, 189, 214, 0.25); }
.ap7 .card2 .cardBadge span { background-image: linear-gradient(90deg, #AC4EEA 0%, #0BCDE0 100%); }

/* ap7 卡片內容 (黑底半透明玻璃框) */
.ap7 .group { text-align: center; margin-bottom: 3rem; color: #FFFFFF; }
.ap7 .group .title { font-size: var(--fsXL); font-weight: 700; letter-spacing: 2px; line-height: 1.2; color: #FFFFFF; margin-bottom: 1.2rem;}
.ap7 .group .sub { font-size: var(--fsL); font-weight: 500; color: #FFFFFF; }

.ap7 .innerBox { background: rgba(0, 0, 0, 0.20); border: 2px solid #fff; border-radius: 20px; padding: 3rem 2.5rem; min-height: 220px; flex: 1; display: flex; align-items: center; }
.ap7 .innerBox ul { width: 100%; margin: 0; padding: 0;}
.ap7 .innerBox ul li { color: #FFFFFF;display: block;  font-size: var(--fsP); font-weight: 400; line-height: 1.8; text-align: left; margin-bottom: 0.5rem; position: relative; padding-left: 2.2rem; }
.ap7 .innerBox ul li:last-child { margin-bottom: 0; }
.ap7 .innerBox ul li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #FFFFFF; position: absolute; left: 5px; top: calc( var(--fsP) - 4px); }

/* ad8 AI 營運閉環 */
.block.ap8 { padding: var(--pd2) 0; }
.block.ap7 .title3,
.block.ap8 .title3{ margin-bottom: 7rem; }
.ap8 .gradientCards .card { width: 100%; background: #FFFFFF; border: 2px solid #AC4EEA; box-shadow: 0 10px 30px rgba(192, 132, 252, 0.15); text-align: center; padding: 6rem 4rem 3.5rem; }
.ap8 .gradientCards .cardBadge {border: 1px solid #AC4EEA;}
.ap8 .card .cardBadge span { background-image: var(--gradient20);}
.ap8 .card .pic { width: 70%; height: 70%; margin: 0 auto 3rem; }
.ap8 .card .pic img { width: 100%; height: 100%; display: block; }
.ap8 .card .cardBody .title { font-size: var(--fsM2); font-weight: 700; text-align: center; margin-bottom: 2rem; }
.ap8 .card .cardBody .sub { padding: 0 8rem; font-size: var(--fsP); color: var(--com01);  text-align: center; margin: 0; }
.ap8 .gradientCards .card:last-child .sub{ padding: 0 9rem; }
.ai-patrol .ap8 .btnbox {margin-top:0;}