/* ------------------- mediaqueries ------------------- */
@media screen and (max-height: 660px) {
	/* NoteBook height */
	.popupbox .content{width: 60%;}
}

@media screen and (max-width:3000px){
    /* .kiosk .block.k2::before{padding-top:41.767%;} */
}
@media screen and (max-width:1920px){
	.laas .block.l3::after{ width: 100%; right: auto; left:0;}
    /* .kiosk .block.k2::before{padding-top:63.767%;} */
	
	/* ============== KDS廚房系統 kds ============== */
	.kds .block.b4::after{ top: -650px;}
	.kds .block.b5::after{ top: 70%;}
	
	/* ============== 產品頁-AI ============== */
	.AI .a9::before,
	.AI .a10::before{ top: -150px;}
	.AI .a11::before{ top: -80px;}
	.AI .a3::before{ background-size: 130% auto!important;}
	
	.pos .block.p3::after { background-size: 1920px auto;height: 100%;}
	.pos .block.p10::after,
	.pos .block.p6::after,
	.hd-bg::after{ background-size: 1920px auto;}
}
@media screen and (max-width: 1500px){
	.rightMenu a.mail span{ display: none;}
	.rightMenu a.mail::before{ display: inline-block;}
    .mainContent {margin:0 auto;}
    .contactUs .contactBox .word{font-size:32px;}
	
	/* .index .navBody .container{ padding: 0 var(--pd2); max-width: none;}
	.index .navBody .main .right{ right: var(--pd2);}
	.index .navBody .sec dl{padding: 2rem 0 5rem calc(var(--pd2) + 8rem + 5rem);} */
	.index block.KV{ width: calc(100% - var(--pd2));}
	
	
	.caseLogoList .listBox li,
	.case .caseLogoList .listBox li,
	.partnerList .listBox .ditem{width: calc(100%/4 - 20px);}

	/* ============== 產品頁-SaaS服務中台 laas ============== */
	.laas .block.l1 .left{ width: 70%;}
	.laas .block.l1 .right{ width: 30%;}
	.laas .block.l3::after{ background-size: auto 100%;}
	
	/* ============== KDS廚房系統 kds ============== */
	.kds .block.b4::after{ top: -500px;}
	
	/* ============== 產品頁-AI ============== */
	.AI .a3::before{ background-size: 200% auto!important;}
	.AI .a4::before{ top: -600px;}
	.AI .a9::before,
	.AI .a10::before{ top: -100px;}
	.AI .a11::before{ top: -60px;}
	.AI .a9::before{ background-size: auto 100%!important; padding-top: 200%;}
}
@media screen and (max-width:1280px) {
	:root{
		--fsXS:1.1rem; 	/* font size XS */
		--fsS: 1.2rem; 	/* font size S */
		--fsP: 1.6rem; 	/* font size P */
		--fsM: 2.2rem; 	/* font size M */
		--fsM2:2.7rem; 	/* font size M2 */
		--fsL: 3.2rem; 	/* font size L */
		--fsXL:4rem; 	/* font size XL */
		--fsXL2:5rem; 	/* font size XL2 */
		
		--maxW:1160px;	/* general max-width */
		--pd:2.4rem; 
	}
	.navBody .main a,
	.navBody .sec dt{ margin-right: 3rem; }
	.navBody .main .right a{ margin: 0 0 0 1.5rem;}
	.navBody .sec dl{ padding: 1rem 0 3rem var(--pd);}
	.navBody .sec dl.m2,
	.navBody .sec dl.ms{ padding-left: calc(var(--pd) + 8rem + 3rem);}
	.navBody .sec dd{ margin-right: 7.5rem;}
	/* .index .navBody .container{ max-width: var(--maxW);}
	.index .navBody .main .right{ /有EN, right: var(--pd2);/ right: 6rem;}
	.index .navBody .sec dl{ padding: 1rem 0 3rem calc(var(--pd2) + 8rem + 3rem);} */

	footer .contactBox{ background-position: left; background-image: url(../Images/moreBanner5pc.jpg);}
	
	.laas .block.l5::after{ top: -200px;}
	
	block.applictaion a{ width: 230px;}
	.mainContent .inPagekv{ height: 360px;}
	
	/* ============== 聯絡我們 ============== */
	.contactBlock .tableBox{ margin-top: -300px;}
	
	/* ============== 產品頁-Kiosk自助點餐機 ============== */
	.mStore .b1 .right,
	.mStore .b1 .left{ width: 50%;}
    
    /* ============== 產品頁-超級店長 mStore ============== */
    /* .kiosk .k4 ul{width:calc(40% - 40px);}
    .kiosk .k4{padding:100px 0 300px 0;}
    .kiosk .k4 li.i2 a.btn{font-size:16px; padding:10px 30px 5px 30px; filter:none; color:#000; max-height:45px; margin-top:5px; letter-spacing:0;}
    .kiosk .k4 b{font-size:35px;}
    .kiosk .k4 span{font-size:22px;}
    .kiosk .k6:before{padding-top:89.767%; top: -55px;}
    .kiosk .k7{padding-top:0;}
    .kiosk .k8:before{top:80px;} */
	
	/* ============== 為什麼 why ============== */
	.w1 .graphic .circle{ width: 150px;}
	.w6 .map .loc .txt{ font-size: 16px;} 
	.w6 .map .loc .txt b.b1 { font-size: 22px;}
	/* .w6 .map .loc.m1 .txt{ left: -9%; }
	.w6 .map .loc.m2 .txt{ left: -16%; }
	.w6 .map .loc.m3 .txt{ left: 4%; } */
	.why .w7 .articalList .group ul{ width: calc(100%/5 - 40px);}

	/* ============== 產品頁-POS ============== */
	.pos .tab-txt .page img{ width: 450px;}
	.pos .p6 img{ width: 400px;}
	.articalList.s2 .group ul{ padding: 20px 10px; }
/*	.pos .tab-list a{ padding: 8px 20px;}*/
	
	/* ========= service/maintenance 維運服務 ========= */
	.mainten .m1 .moviebox{height: 600px;}
	.mainten .m1 .moviebox img{width: 55%;}
	.mainten .m2 .tabList li.head{ padding-left: 55px;}
	
	
	/* ============== industry/beverage 茶飲 ============== */
	.beverage .b7 .album01 .item::after { content: '';  width: 100%; height: 85%;}
	.beverage .b7 .album01 .item li.a2 { margin-top: -70px;}
	.FAQ dd .cq01, 
	.FAQ dd .cq02{ padding:1rem 1rem 1rem 70px;}
	

	/* .restaurant .r7 .album01 .item::after { content: '';  width: 100%; height: 85%;} */

	/* ------- 產品頁-自助點餐機 kiosk ------- */
	.kiosk .k1 .articalList ul{ width: calc(100% / 3 - 20px)!important; height: 300px; }
	.kiosk .k3 .item .group img { width: 230px; padding: 0 15px;}

	/* ============== restaurant ============== */
	.restaurant .tab-list a{ font-size: 19px; }
	.restaurant .tab-txt .page .group h5 b.UI{ font-size: 20px; }
	.restaurant .tab-txt .page .group h5.title .note{ font-size: 14px;}
	.restaurant .tab-txt .page .group li{ font-size: 15px;}

	/* 3個客戶證言寫法 */
	/* .restaurant .r7 .album01 .group{ height: 400px;}
	.restaurant .r7 .album01 .item { width: calc(100% / 2);} */
	
	.openTable .item li.i1,
	.openTable .item li.i4{ font-size: 20px; }
	.openTable.showall ul li span{ font-size: 14px; }

	.restaurant .quickmenu { width: 50%;}
	.restaurant .quickmenu p{font-size: 19px;}
	.restaurant .r3 .intro p{font-size: 18px;}

	.restaurant .r7 .album01 .item::after { height: 100%;}
	.restaurant .r7 .album01 .item li.a2 { margin-top: -70px;}
	.restaurant .r7 .album01 .item .group{ display: flex; flex-direction: column;justify-content: space-between;}


	/* ============== bakerypos ============== */
	.bakerypos .b3 .album01 .item::after { height: 100%;}
	.bakerypos .b3 .album01 .item li.a2 { margin-top: -70px;}
	.bakerypos .b3 .album01 .item .group{ display: flex; flex-direction: column;justify-content: space-between;}

	/* ============== 產品頁-發票加值系統 einvoice ============== */
	.einvoice .block.e7::before {padding-top:25%;}

	/* ============== ai-decision ============== */
	.ai-decision .ad4::after{ background-size: 1920px auto;}
	.ai-decision .articalList.circle ul{ padding: 10rem 3rem 3rem 3rem;}
	
	/* ad6 AI 營運閉環 */
	.ai-decision .ad6 .articalList.circle ul { width: calc(100% / 3 - 50px) ; margin: 4rem 2.5rem 3rem 2.5rem ;}
	.ai-decision .ad6 .articalList.circle li.l3 {height:auto; }
	.ai-decision .ad6 .articalList.circle .item:not(:first-child) ul::after { left: -25px ; }
	.ai-decision .ad6 .articalList.circle .item:nth-child(4) ul::after {display: none !important;}



}


@media screen and (max-width: 1000px) {
	/* 行動裝置版面 */
	.pc{ display: none!important;}
	.mobile{ display: inline-block!important; }
	img.pc + img.mobile{ display: block!important; margin-left: auto; margin-right: auto;}

	/* header 選單調整 */
	header .mheader{ display: block; width: 100%; padding: 1rem 0; margin-bottom: 1rem;}
	.s1 header .mheader,
	.s2 header .mheader{ margin-bottom: 0;}
	header .mheader .container{ display: flex; align-items: center; justify-content: space-between; width: 100%; }
	/* .index header .mheader .container{ padding: 0 var(--pd2); z-index: 9; transition: .3s; } */
	/* .MobileMenuOn .index header .mheader .container{ padding: 0; transform: translateY(calc(0px - var(--pdh))); } */
	header .mheader a.back{ display: none; position: relative; z-index: 9;}
	header .mheader a.back::before{ font-size: 3.5rem;}
	a.mobilemenu{ display: inline-block;}

	header .navBody .container{ padding: 10rem 5rem 0!important;}
	header .navBody .main .left,
	header .navBody .main .right{ position: relative; width: 100%; top: auto; right: auto!important; transition: .3s; transform: none;}
	header .navBody .main.off .left,
	header .navBody .main.off .right{ transform: translateX(-1rem);}
	header .navBody .main .container{ display: block;}
	header .navBody .main a{ display: block; font-size: var(--fsM); color: #000; margin: 0!important; padding: 1.5rem 0!important;}
	header .navBody .main a.logo,
	header .navBody .main a.public,
	header .navBody .main a.UI::before{ display: none;}
	header .navBody .main .right .search span{ display: inline-block;}

	body.MobileMenuOn{ overflow: hidden;}
	body.MobileMenuOn a.mobilemenu{ background-color: transparent;}
	body.MobileMenuOn .mheader a.logo{ display: none;}
	body.MobileMenuOn .mheader a.back{ display: inline-block; opacity: 0; pointer-events: none; transition: .6s;}
	body.MobileMenuOn .mheader a.back.on{ opacity: 1; pointer-events: auto;}

	header .navBody .main,
	header .navBody .sec{ position: fixed; top: -100%; left: 0; width: 100%; height: 100%; transition: .3s; z-index: 3; overflow: auto;}
	header .navBody .sec{ top: 0; z-index: 4; pointer-events: none;}
	header .navBody .secbg{ top: 0; width: 100%; height: 100%; background-color: #FFF!important; opacity:0; transition: opacity .4s; pointer-events: none;}
	header .navBody .sec.on .secbg{ opacity: 1; pointer-events: auto;}
	header .navBody .sec dl {font-size: 2.6rem; padding: 10rem 5rem 0!important; left: 1rem; transition: .3s;}
	header .navBody .sec dl.on{ left: 0;}
	header .navBody .sec dd{ margin-right: 0; width: 100%;}
	header .navBody .sec dt{ display: none;}
	header .navBody .sec .ms dd{ width: 100%; display: flex; flex-direction: column-reverse; align-items: flex-start;}
	header .navBody .sec .ms dd input{ border-bottom: 1px solid #595959;}
	header .navBody .sec .ms dd a.search{ margin-top: 2rem; background-color: #595959; color: #FFF!important; padding: 1rem 3rem; border-radius: 10rem; }
	header .navBody .sec .ms dd a span{ display: inline-block;}

	body.MobileMenuOn .navBody .main{ top: 0;}

	/* header 首頁選單調整 */
	/* .index .navBody .main{ background-color: #FFF;} */
	
	/*  footer */
	footer .footerMenu .list{ padding: 35px 0 50px;}
	footer .footerMenu ul{width: calc(100%/3);}
	footer .statement .box{ display: inline-block; width: 100%;}
	footer .statement .wordL,
	footer .statement .wordR{ width: 100%; text-align: center; font-size: 16px; padding: 5px;}
	
	/* 其他共用項目調整 */
	.listStyle01 ul{width: 100%;}
	.articalList ul{width: calc(100% / 2 - 20px)!important; margin: 10px;}
	.articalList.s2 ul{width: calc(100% / 3 - 20px)!important;}

	.eval_list .item{ width: calc(100%/2 - 2rem);}

	.serviceMap{ background-size: 115% auto; background-position: left center;}
	.serviceMap .txt{ width: 100%; left: auto; right: var(--pd2); bottom: 0; font-size: var(--fsM);}

	.consultBanner{ display: block; margin-bottom: 400px; background-position:right; position: relative;}
	.consultBanner dl{ width: 100%; position: absolute; top: calc(100% + var(--pd)); left: 0;}
	.consultBanner dt {font-size: var(--fsL); font-weight: 700;}
	.consultBanner dt, .consultBanner dd{ margin-bottom: var(--pdh);}
	
	
	.mainContent .inPagekv{ background-position: right;}
	.AI .mainContent .inPagekv,
	.search .mainContent .inPagekv{ background-position: center;}
	.contactBlock .inPagekv {background-position: top left;}
	
	.caseDemoList li{ width: calc(100%/2 - 30px);}
	
	.caseLogoList .listBox li,
	.partnerList{ margin-bottom: 0;}
	.case .caseLogoList .listBox li{ margin-bottom: 70px;}
	.partnerList .listBox .ditem{width: calc(100%/3 - 20px);}
	.caseLogoList.s2 .listBox li{width: calc(100%/4 - 40px);}
	
	/* ============== 共用 Style-2 ============== */
	.topbanner .group{width: calc(50% - var(--pd));}
	.topbanner .mov{ width: calc(50% - 20px); margin: 20px 20px 0 var(--pd); position: relative; }
	.topbanner .mov::after{ top:-20px; right: -20px;}
	
	/* ============== index ============== */
	block.KV::before {width: 113px; background-image: url(../Images/index/kv_coner-01b.svg);}
	block.KV::after{ height: 105px;}
	.index h5.title .en{ font-size: 50px;}
	.index h5.title .ch{ font-size: 36px;}
	.solution-list .part{ width: calc((100% - var(--pdh))/2); margin: 0 var(--pdh) var(--pdh) 0; font-size: 16px;}
	.solution-list .part:nth-of-type(3n){ margin-right: var(--pdh);}
	.solution-list .part:nth-of-type(even){ margin-right: 0;}
	.solution-list .part h6{ font-size: 22px;}
	
	block.applictaion{ flex-direction: column;}
	block.applictaion a{ width: 260px; margin: 10px!important;}
	block.applictaion a span{ font-size: var(--fsM);}
	
	block.case .listBox{ width: 80%;}
	block.case .listBox li {width: calc(100% / 3 - 10px);}
	
	block.news .listBox{ width: 100%;}
	block.news .listBox.hot .item{ width: calc(100% - 200px); margin-left: 190px; margin-top: -50px; max-width: 540px;}

	/* thankyou */
	.thankyou block{flex-direction: column; text-align: center;}
	
	/* ============== 新聞列表 ============== */
	.about.news .aboutNews .mainList{ display: inline-block; width: 100%;}
	.about.news .mainList .item,
	.about.news .mainList .item dl{ width: 100%; max-width: none;}
	.about.news .mainList .item dl{ margin-bottom: var(--pdq);}
	.about.news .mainList .item dt{ float: left; margin: 0 15px 0 0;}
	.about.news .mainList .item dt,
	.about.news .mainList .item::before{ width: 280px;}
	.about.news .mainList dd{ width: calc(100% - 300px);}
	.about.news .mainList dd.n1{ margin-top: 0;}
	.about.news .mainList .item:nth-of-type(even)::before{ left: auto; right: 0;}
	.about.news .mainList .item:nth-of-type(even) dt{ float: right; margin: 0 0 var(--pdq) 15px;}
	.about.news .listBox li.pic{ display: none;}
	.about.news .listBox a.item,
	.about.news .listBox li.word{ width: 100%; margin-left: 0;}
	
	.inPage .mainTop .main{ display: inline-block; text-align: center;}
	.inPage .mainTop::after{ left: 0; border-radius: 0;}
	.inPage .mainTop dl{ width: 100%;}
	.inPage .mainTop .pic{ width: 80%; margin: 20px auto;}
	.about.newsPage .title .t1{ font-size: 36px;}
	.about.newsPage .title .t2{ font-size: 26px;}
	
	/* ============== 聯絡我們 ============== */
	.contactBlock .contactPage{ display: inline-block;}
	.contactBlock .tableBox{ width: 100%; max-width: none; margin: 0;}
	.contactBlock .block.c2{ margin-top: -300px;}
	.mapbox .loc{ transform: scale(.8); transform-origin: top center;}
	.mapbox .map,
	.mapbox .txt{ height: 624px;}
	.mapbox .info ul{ top: 45%;}
	.contactBlock .mapbox .map{ height: 1028px;}
/*
	.contactBlock .map,
	.contactBlock .tableBox{ width: 100%; max-width: none; margin: 0;}
	.contactBlock .tableBox{ margin-top: 50px;}
*/
	
	/* ============== 資源與活動 ============== */
	.eventsIn{ display: inline-block;}
	.eventsIn .wordL,
	.eventsIn .tableBox{ width: 100%;}
	.eventsIn .tableBox{ margin: var(--pd) auto;}
	
	.events .hotnews{ display: inline-block;}
	.events .hotnews .pic{ margin-bottom: var(--pdq);}
	.events .hotnews dd{width: 100%; padding: 0;}
	
	.events .listBox a{width: calc((100% - var(--pdh))/2);}
	.events .listBox a:nth-of-type(3n+3){ margin-right: var(--pdh);}
	.events .listBox a:nth-of-type(even){ margin-right: 0;}
	
	/* ============== jobs 徵才情報 ============== */
	.about.jobs .article .txt{ width: 100%!important;}
	.about.jobs .article img{ width: 80%; margin: 40px auto; display: block;}
	.about.jobs .article .area1 .txt{ position: relative;}
	.about.jobs .article .area1{ background-position: 20px 100%;}
	.about.jobs .bg-shape::after{ left: -430px;}
	.about.jobs .article .area2{ display: inline-block;}
	
	/* ============== 為什麼選擇 WiXtar ============== */
	.why .block.bg::before{ background-size: 200% auto;}
	.why .w4.bg::before{ padding-top: calc(100% + 260px);}
	.caseLogoList.why .listBox li{ width: calc(100% / 3 - 20px); margin-bottom: 10px;}
	.caseLogoList.why .listBox li:nth-of-type(6n+1),
	.caseLogoList.why .listBox li:nth-of-type(12n+7){ margin-left: 10px;}
	
	.why .w5 .articalList{justify-content: center;}
	.why .w5 .articalList ul { width: calc(100% / 2 - 40px)!important;margin: 20px;}

	.w1 .graphic{ background-image: url(../Images/Why/w1bg_m.jpg);}
	.w1 .graphic::after{ padding-top: 82.717%; }
	.w1 .graphic .circle{ top: 0%;}
	.w1 .graphic .circle.c1{ top: 11%; left: 5%;}
	.w1 .graphic .circle.c2{ top: 37%; left: 12%;}
	.w1 .graphic .circle.c3{ left: 26%;}
	.w1 .graphic .circle.c4{ right: 26%;}
	.w1 .graphic .circle.c5{ top: 37%; right: 12%;}
	.w1 .graphic .circle.c6{ top: 11%; right: 5%;}

	.block.w1 > .container-belt,
	.block.w6 > .container{ padding:0; }
	.block.w1 > .container-belt h4.title,
	.block.w6 > .container h4.title{ padding: 0 var(--pd); }
	.why .w6 .map{ margin-top: -15rem;}

	.why .w7 .articalList .group ul{ width: calc(100%/4 - 20px)!important;}
	
	/* ============== 產品頁-發票加值系統 einvoice ============== */
	.einvoice .block::before{ background-size: 200% auto;}

	.einvoice .list1 ul,
	.einvoice .list3 ul{width: calc(100% / 2 - 40px);}
	
	.einvoice .block.e2,
	.einvoice .e8 .txt{flex-direction: column;}
	.einvoice .e2 img{ width: 95%;}
	
	.articalList.box ul{width: calc(100% / 4 - 40px)!important;}
	.articalList.box li img { max-width: 50%;}

	.einvoice .e6 .group  {display: flex;flex-direction: column;}
	.einvoice .e6 .group .item{width: calc(100%/1 - 40px);}
	.einvoice .e6 .group .item dd{padding: 3rem 2rem 2.5rem 2rem; }

	/* ============== 產品頁-mpos ============== */
    .mPOS .list1 ul{width:calc(100% / 2 - 40px);}
    .product.mPOS .item.i4 dl{width:50%;}
    
	/* ============== 產品頁-SaaS服務中台 laas ============== */
	.laas .block.l1 .left{ width: 95%; padding-right: 50px;}
	.laas .block.l1 .left::after{ right: 0;}
	.laas .block.l1 .right{ margin-top: -50px;}
	.laas .block.l2::after{ right: -80%;}
	.laas .block.l3 img{ height: 822px;}
	.laas .block.l3 h4{ width: 50%; top: 80%; left: 50%;}
	.laas .block.l7::after{ top: 0;}
	
	/* ============== 產品頁-超級店長 mStore ============== */
	.mStore .b1 h4{ text-align: center;}
	.mStore .b1 .time-list{ width: 80%; margin: 0 auto;}
	.mStore .b1 .right,
	.mStore .b1 .left{ width: 100%;}
	.mStore .b1 .left{ margin-bottom: 20px;}
	.mStore .b1 .bg-shape::before{ top: -10%; right: -60%;}
	.mStore .b1 .bg-shape::after{ left: -60%;}
	.mStore .block.b2{ background-size: 150%;}
	.mStore .block.b4{ background-size: auto 100%; background-position: bottom right;}
	.mStore .b6 .bg-shape::before{ left: -60%;}
	.mStore .b6 .bg-shape::after{ right: -60%;}
	.mStore .b7 h4,
	.mStore .b7 img{ width: 100%; margin-right: 0;}
	.mStore .b8 > .container-belt{ padding: 0;}
	.mStore .block.b9{ padding-top: 100px; background-size: auto 140%;}
	
	/* ============== KDS廚房系統 kds ============== */
	.kds .block.b2 > .container-belt,
	.kds .block.b4 > .container-belt{ padding: 0 calc(var(--pdh));}
	.kds .block.b4::after{ top: -300px;}
	.kds .block.b5::after{ top: 85%;}
	.kds .b5 .container-belt > img, .kds .b5 .group{ width: 100%;}
	.kds .b5 .container-belt > img{margin-bottom: var(--pd);}
	
	/* ============== 掃碼點餐 online ============== */
	.bodybox.online .inPagekv{ height: 455px;}

	.online .block.bg::before{ background-size: 200% auto;}

	.articalList.circle ul{ width: calc(100% / 3 - 40px) !important;}

	.online .o1 .graphic{ background-image: url(../Images/product/online/o1-m.png);}
	.online .o1 .graphic .circle{ width: 190px; }
	.online .o1 .graphic::after{ padding-top: 156.25%; }
	.online .o1 .graphic .circle{ top: 0%;}
	.online .o1 .graphic .circle.c1{ top: 0%; left: 5%;}
	.online .o1 .graphic .circle.c1::before{ content: ''; display: block; padding-top: 100%; top: 0%; left: 50%;background-image: url(../Images/product/online/o2_1.png);}

	.online .o1 .graphic .circle.c2{ top: 25%; left: 3%;}
	.online .o1 .graphic .circle.c3{ top: 13%; left: 34%; width: 200px;font-size:2.6rem;}
	.online .o1 .graphic .circle.c4{ top: 36%; left: 35%;}
	.online .o1 .graphic .circle.c5{ top: 25%; right: 3%;}
	.online .o1 .graphic .circle.c6{ top: 0%; right: 5%;}

	.online .o3 .group{display: flex;flex-direction: column;margin: 4rem 0 0 0;padding: 3rem 2rem;gap: 2rem;}
	.online .o3 .intro img{ width: 130px;}
	.online .o3 .group .txt{display: flex; flex-direction: column;align-items: flex-start}
	.online .o3 .subtitle {margin-bottom: 1rem;}
	.online .o3 .item:last-child{ border-bottom: 2px solid var(--sec02);}
	.online .o3 .item.show:last-child{border-bottom: 0px;}

	.online .o3 .item.show .intropic{display: flex;flex-direction: column;align-items: center; padding:0 2rem; position: relative; overflow: hidden;}
	.online .o3 .item.show .intropic .icon{display: flex;flex-direction: row; margin:2rem;}
	.online .o3 .item.show .intropic img { width: 50%; margin-bottom:0;padding: 3rem;}

	.online .o3 .item.show .intropic.i1 .icon::after,
	.online .o3 .item.show .intropic.i2 .icon::after{ content: ""; position: absolute; top:63%; right: auto; width: 45px; height:100%; background-size: contain; display: inline-block; transform: rotate(90deg) scale(3.0); }
	.online .o3 .item.show .intropic.i3 .icon::after{top: 63%; right: 21%; width: 45px; height:100%; background-size: contain; display: inline-block; transform: rotate(90deg) scale(3.4);}

	.online .o3 .item.show .intropic.i1 .groups {display: flex;}
	.online .o3 .item.show .intropic.i1 .groups .icon:nth-of-type(1){padding:0 2rem 3rem 0; margin: 3rem 0 0 0 ; border-bottom: 0px solid ; border-right: 2px solid var(--sec02);}
	.online .o3 .item.show .intropic.i1 .groups .icon:nth-of-type(2){padding:0 0 3rem 2rem; margin: 3rem 0 0 0 ;}
	.online .o3 .item.show .intropic.i1 .groups .icon{display: flex; flex-direction: column; margin: 0rem;}
	.online .o3 .item.show .intropic.i1 .groups .icon img{ padding: 2rem 3rem 3rem 3rem; width: 100%;}

	.online .o3 .item.show .intropic.i2 .groups {margin: 2rem 2rem 1rem 2rem;}
	.online .o3 .item.show .intropic.i2 .groups .icon { margin: 3rem;}
	.online .o3 .item.show .intropic.i2 .groups .icon img{ padding: 0; margin-bottom: 0;width: 28%;}
	.online .o3 .item.show .intropic.i2 .groups .icon::before,
	.online .o3 .item.show .intropic.i2 .groups .icon:nth-of-type(2)::before,
	.online .o3 .item.show .intropic.i2 .groups .icon:nth-of-type(3)::before{ left: 1%; background-size: 110%;}

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

	.online .o4 .tab-txt .page .group{ width: 100%; padding: 0 2rem;}
	.online .o4 .t1 .tab-txt .page.t1,
	.online .o4 .t2 .tab-txt .page.t2,
	.online .o4 .t3 .tab-txt .page.t3{display: flex;align-items: center;margin-bottom: 1rem;}

	.online .o5.mobile .tab-list a{ white-space: inherit;width: calc(100% / 2 - 20px);margin: 1rem; text-align: center;}

	.online .t1 .tab-txt .page.t1,
	.online .t2 .tab-txt .page.t2,
	.online .t3 .tab-txt .page.t3 {display: flex;flex-direction: column;align-items: center;}
	.online .tab-txt .page .tab-pic { margin-bottom:4rem; width: 100%;}
	.online .tab-txt .page img { width: 100%;border-radius: 25px;}
	.online .tab-txt .page .group { width: 100%; padding-left: 0;padding: 0 1rem;}   

	/* ============== 產品頁-自助點餐機 kiosk ============== */
	.kiosk .block::before{ background-size: 200% auto;}
	.kiosk .k6 .iconList{ display: inline-block; }
	.kiosk .k6 .iconList > div{ width: calc(100%/3 - 2rem);margin: 1rem;}

	/* 共用 - 痛點 解方*/
	.painSolution .item{width: calc(100% / 2 - 20px);margin: 1rem;}


	/* ============== 產品頁-AI ============== */
	.photoflow{flex-direction: column;}
	.photoflow li.f3{ transform: rotate(90deg);}
	.photoflow .pwords{ min-width: 400px;}
	.AI .a3::before{ padding-top: 250%; background-position: center bottom!important; background-size: 330% auto!important;}
	.AI .a4::before{ top: auto; bottom: 0; padding-top: 250%; background-position: center bottom!important; background-size: 140% auto!important;}
	.AI .a9 img{ width: 100%; max-width: 599px; margin: 10px auto;}
	.AI .a9::before{ padding-top: 300%; top: -150px;}
	.AI .a11::before{height: 120%; background-size: auto 130%!important; }
	
	/* ============== 產品頁-POS ============== */
	ul.tabList > li{ width: calc(100% / 2);}
	.pos .tab-txt .page img{ width: 540px;}
	.pos .tab-txt .page{flex-direction: column;}
	.pos .tab-txt .page .group{padding-left: 0; padding-top: var(--pd); width: 540px;}
	.pos .tab-txt .page .group h5, 
	.pos .tab-txt .page .group p{ width: 100%;}
	.pos .p6 .container-belt{flex-direction: column;}
	.pos .p6 .group{padding-left: 0; padding-top: var(--pd);}
	.pos .p6 img,
	.pos .p6 .group,
	.pos .p6 .group h5,
	.pos .p6 .group p{width: 500px;}
	.pos .p6 .group a{ display: block; width: 200px; margin: 0 auto; text-align: center;}
	
    /* ============== error ============== */
    .erro .info{margin:-130px 0 0 0;}
    .erro .info b{font-size:215px;}
	
	/* ========= service/maintenance 維運服務 ========= */
	.mainten .m1 .moviebox{ height: 560px; margin-top: 0px;}
	.mainten .m1 .moviebox img{width: 53%;}
	.mainten .m3 .container-belt,
	.mainten .m4 .container-belt{flex-direction: column;}
	.mainten .m3 img, 
	.mainten .m4 img{ margin-right: 0; margin-bottom: var(--pd); width: 80%;}
	.mainten .m4 .group,
	.mainten .m3 .group{ text-align: center; margin-bottom: 0;}

	/* ============== TQG ============== */
	.tqg .block::before{ background-size: 200% auto;}
	.tqg .block.t1 .articalList ul{ padding: 10px;}
	.tqg .block.t2::before{ top: -150px;}

	.t2 .chartbox{ width: 100%; max-width: 580px; padding: 12rem 0;}
	.t2 .chartbox .txtbox{ }
	.t2 .chartbox .txtbox .txt{ font-size: var(--fsP);}
	.t2 .chartbox .txtbox .txt dt{ padding-bottom: 0;}
	.t2 .chartbox .txtbox .txt.t1{ top: 0; left: 0;}
	.t2 .chartbox .txtbox .txt.t2{ top: 0; right: 0;}
	.t2 .chartbox .txtbox .txt.t4{ bottom: 0; left: 0; }
	.t2 .chartbox .txtbox .txt.t3{ bottom: 0; right: 0;}

	.t2 .chartbox .txtbox .txt dd::before{ height: 6rem; top: auto; bottom: auto; left: auto; right: auto; }
	.t2 .chartbox .txtbox .txt.t1 dd::before{ width: 35%; bottom: -6rem; left: 25%; border-left: 2px solid #000; border-radius: 0 0 0 2rem; }
	.t2 .chartbox .txtbox .txt.t2 dd::before{ width: 30%; bottom: -6rem; right: 25%; border-right: 2px solid #000; border-radius: 0 0 2rem 0; }
	.t2 .chartbox .txtbox .txt.t3 dd::before,
	.t2 .chartbox .txtbox .txt.t4 dd::before{ width: 40%; top: calc(-6rem - var(--fsP)*1.5 - 6px - 1rem); border-bottom: none; border-top: 2px solid #000;}
	.t2 .chartbox .txtbox .txt.t4 dd::before{ left: 25%; border-left: 2px solid #000; border-radius: 2rem 0 0 0; }
	.t2 .chartbox .txtbox .txt.t3 dd::before{ right: 25%; border-right: 2px solid #000; border-radius: 0 2rem 0 0; }

	.t2 .chartbox .txtbox .txt dd::after{ top: auto; border-width: 2px; width: 13px; height: 13px;}
	.t2 .chartbox .txtbox .txt.t1 dd::after{bottom:calc(-6rem - 6px); left: calc(35% + 25%); }
	.t2 .chartbox .txtbox .txt.t2 dd::after{bottom:calc(-6rem - 6px); right: calc(30% + 25%); }
	.t2 .chartbox .txtbox .txt.t4 dd::after{top: calc(-6rem - var(--fsP)*1.5 - 6px - 1rem - 6px); left: calc(40% + 25%); }
	.t2 .chartbox .txtbox .txt.t3 dd::after{top: calc(-6rem - var(--fsP)*1.5 - 6px - 1rem - 6px); right: calc(40% + 25%); }

	.t2 .chartbox .graphic{width: 100%; max-width: none;}

	.tqg .block.t3 h4.title{ margin-bottom: 0;}
	.tqg .block.t3 .aniGraphic{width: 80%; margin: 0 auto;}
	.tqg .block.t3 .aniGraphic .aniBg{ transform: scale(0.96);}
	/* .tqg .block.t3 .aniGraphic .icon .item::after{ padding-top: 100%;} */
	.tqg .block.t3 .aniGraphic::after{ padding-top: 200.37%;}
	.tqg .block.t3 .aniGraphic .icon .item,
	.tqg .block.t3 .aniGraphic .icon2 .item{ width: calc(100%/2 - 2rem);}
	.tqg .block.t3 .aniGraphic .icon .item span,
	.tqg .block.t3 .aniGraphic .icon2 .item span{ bottom: 6rem;}
	.tqg .block.t3 .aniGraphic .icon .item.a8,
	.tqg .block.t3 .aniGraphic .icon .item.a9,
	.tqg .block.t3 .aniGraphic .icon2 .item.a8,
	.tqg .block.t3 .aniGraphic .icon2 .item.a9{ width: calc(100%/4 - 1rem);}

	.tqg .block.t3 .aniGraphic .icon .item.a2 { animation: iconAni_a2m_text 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a2 i.pic::before { animation: iconAni_a2m_image 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a3 { animation: iconAni_a3m_text 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a3 i.pic::before { animation: iconAni_a3m_image 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a4 { animation: iconAni_a4m_text 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a4 i.pic::before { animation: iconAni_a4m_image 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a5 { animation: iconAni_a5m_text 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a5 i.pic::before { animation: iconAni_a5m_image 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a6 { animation: iconAni_a6m_text 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a6 i.pic::before { animation: iconAni_a6m_image 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a7 { animation: iconAni_a7m_text 10s linear infinite; }
	.tqg .block.t3 .aniGraphic .icon .item.a7 i.pic::before { animation: iconAni_a7m_image 10s linear infinite; }

	/* 手機版強制點選套上.lock */
	.tqg .block.t3 .aniGraphic .icon .item:hover{ transform: scale(1); filter: none;}
	.tqg .block.t3 .aniGraphic .icon2 .item{ opacity: 0; filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); transition: .1s;}
	.tqg .block.t3 .aniGraphic .icon2 .item.lock{ opacity: 1; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));}

	@keyframes iconAni_a2m_text {4% { font-size: 0; } 7% { font-size: var(--fsS); } 49% { font-size: var(--fsS); } 50% { font-size: 0; } 100% { font-size: 0; }}
	@keyframes iconAni_a2m_image {4% { opacity: 0; } 7% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }}
	@keyframes iconAni_a3m_text {54% { font-size: 0; } 57% { font-size: var(--fsS); } 99% { font-size: var(--fsS); } 100% { font-size: 0; }}
	@keyframes iconAni_a3m_image {54% { opacity: 0; } 57% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; }}
	@keyframes iconAni_a4m_text {9% { font-size: 0; } 12% { font-size: var(--fsS); } 49% { font-size: var(--fsS); } 50% { font-size: 0; } 100% { font-size: 0; }}
	@keyframes iconAni_a4m_image {9% { opacity: 0; } 12% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }}
	@keyframes iconAni_a5m_text {59% { font-size: 0; } 62% { font-size: var(--fsS); } 99% { font-size: var(--fsS); } 100% { font-size: 0; }}
	@keyframes iconAni_a5m_image {59% { opacity: 0; } 62% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; }}
	@keyframes iconAni_a6m_text {14% { font-size: 0; } 17% { font-size: var(--fsS); } 49% { font-size: var(--fsS); } 50% { font-size: 0; } 100% { font-size: 0; }}
	@keyframes iconAni_a6m_image {14% { opacity: 0; } 17% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }}
	@keyframes iconAni_a7m_text {
		17% { font-size: 0; } 
		19% { font-size: var(--fsS); } 
		49% { font-size: var(--fsS); } 
		50% { font-size: 0; }
		62% { font-size: 0; } 
		64% { font-size: var(--fsS); } 
		99% { font-size: var(--fsS); } 
		100% { font-size: 0; }}
	@keyframes iconAni_a7m_image {
		17% { opacity: 0; } 
		19% { opacity: 1; } 
		49% { opacity: 1; } 
		50% { opacity: 0; } 
		62% { opacity: 0; } 
		64% { opacity: 1; } 
		99% { opacity: 1; } 
		100% { opacity: 0; }}
	
	.tqg .block.t3 svg path.st4 {animation: animate-st4 10s linear infinite;}
	.tqg .block.t3 svg path.st5 {animation: animate-st5 10s linear infinite;}
	@keyframes animate-st4 {
		0% { stroke-dashoffset: 3000; }
		49% { stroke-dashoffset: 0; }
		50% { stroke-dashoffset: 3000;}
		100% { stroke-dashoffset: 3000; }
	}
	@keyframes animate-st5 {
		0% { stroke-dashoffset: 3000; }
		50% { stroke-dashoffset: 3000; }
		99.99% { stroke-dashoffset: 0; }
		100% { stroke-dashoffset: 3000; }
	}

	/* .tqg .block.t3 .group{flex-direction: column-reverse;} */
	.tqg .block.t3 .txt, .tqg .block.t3 .pic{ width: 100%;}
	.tqg .block.t3 .txt{ padding: var(--pd) var(--pdh) 0;}
	.tqg .block.t3 .txt dt{ font-size: var(--fsM);}
	.tqg .block.t3 .txt dd{font-size: var(--fsP);}
	.tqg .block.t3 .txt dd.s2{padding-left: var(--fsL);}
	.tqg .block.t3 .txt dl{ position: relative; padding-right: 0; top: 0; transform: none; display: none;}
	.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{ display: inline-block; opacity: 1;}

	.tqg .block.t4 .aniGraphic{ max-width: 660px; margin: 0 auto;}
	.tqg .block.t4 .aniGraphic .icon{flex-wrap: wrap;}
	.tqg .block.t4 .aniGraphic::after{ padding-top: 174.815%;}
	.tqg .block.t4 .aniGraphic .icon .item{ width: calc(100%/2);}
	.tqg .block.t4 .emptybox{ width: calc(100%/2); display: inline-block;}
	.tqg .block.t4 .aniGraphic .aniBg, 
	.tqg .block.t4 .aniGraphic .aniAw{ transform: scale(.9);}
	
	.tqg .block.t4 svg #arrow2 {
		offset-path: path("M127,165h285c5.5,0,10,4.5,10,10v640c0,5.5-4.5,10-10,10H127c-5.5,0-10-4.5-10-10V175");
		offset-rotate: auto;
		transform: translateY(-10px);
	}
	.tqg .ag2 .block.t4 svg #arrow2{
		animation: move-along2 10s linear infinite;
	}
	@keyframes move-along2 {
		0% {offset-distance: 0%;}
		31.7% {offset-distance: 100%;}
		100% {offset-distance: 100%;}
	}
	
	
	/* ============== industry/beverage 茶飲 ============== */
	.beverage .block,
	.beverage .block::before{ background-size: 200% auto;}

	.beverage .b7 .album01 .item::after { content: '';  width: 100%; height: 100%;background-image: url(../Images/industry/beverage/dialog_frame_left1.svg),url(../Images/industry/beverage/dialog_frame_right1.svg);}
	
	.beverage .articalList ul{width: calc(100% / 4 - 40px)!important; margin: 20px;}

	/* ============== about ============== */
	.about .block::before{ background-size: 200% auto;}
	
	.about .block.a1 > .container-belt { padding: 0 ;}
	.about .a1 .wd{ padding: 3rem; }

	/* mapbox */
	.about .mapbox .txt .wd{ left: 35%;}
	.bodybox.about .mapbox .map{ margin: 15rem 0 0 0;} /* 調整map位置 */
	.bodybox.about .mapbox .loc{ margin: 15rem 0 0 0; margin-left: 60px;} /* 調整map文字位置 */
	.bodybox.about .block.a2a { padding:0 0  var(--pd3) 0 ;}

	/* a3 */
	.about .block.a3::before,
	.about .block.a5::before { padding-top: 170%; background-image: url(../Images/bgCurve/about_yellowshadow_2.svg); }

	.about .a3 .strategy{ position: static; background-image: none;}
	.about .a3 .strategy::before {content: "";position: absolute; transform: translateX(-42%);opacity: 0.07; z-index: -1;top: 9%;left: 0;width: 100%;height: 100%; background-image: url(../Images/About/a3-m.png); background-size: auto 150%;background-position: center; background-repeat: no-repeat; }
	.about .a3 .strategy .bg{display: none; }
	.about .a3 .item { position: static; width:100%;;} 
	.about .a3 .item.i1 { text-align: left; display: flex;flex-direction: row;}
	.about .a3 .item.i2 { text-align: left; display: flex;flex-direction: row;}
	.about .a3 .item b.icon {margin: 1rem 2rem 1rem 0;background-size: contain; background-position: center;background-repeat: no-repeat;}

	.about .a3 .item:hover,
	.about .a3 .item.i1:hover,
	.about .a3 .item.i2:hover{ transform: none;}

	/* sustainable */
	.sustainable{font-size: 0;display: inline-block; height: fit-content;margin: 0; padding: 5rem 0;}
	.sustainable::after{ background-image: none; }
	.sustainable .txtbox {position: static;}
	.sustainable .txtbox .txt {width: 100%;}
	.sustainable dl { padding: 0 8rem 3rem 9.2rem ; white-space: normal;}
	.sustainable .txtbox .txt dt { padding: 0 ; display: block;}
	.sustainable .txtbox dd{ display: block;}
	.sustainable .txtbox .txt.orange dt::before{border-left: 2px solid #e88c00; }
	.sustainable .txtbox .txt.purple dt::before{border-left: 2px solid #C36CF6; }
	.sustainable .txtbox .txt.blue dt::before{border-left: 2px solid #6477FD; }
	.sustainable .txtbox .txt.orange dt::before,
	.sustainable .txtbox .txt.purple dt::before,
	.sustainable .txtbox .txt.blue dt::before{background-image: none; left: -25px; transform: translateY(0%);}
	.sustainable .txtbox .txt.orange,
	.sustainable .txtbox .txt.purple,
	.sustainable .txtbox .txt.blue { display: block; width: 100%; transform: none; position: static;}

	.sustainable .graphic { display: none;}
	.sustainable .graphic .pic.p0,
	.sustainable .graphic .pic.p1,
	.sustainable .graphic .pic.p2,
	.sustainable .graphic .pic.p3{ background-image: none;}

	.sustainable.a1 .graphic .pic.p1,
	.sustainable.a2 .graphic .pic.p2,
	.sustainable.a3 .graphic .pic.p3{ background-image: none;}

	/* ============== restaurant ============== */
	.restaurant .r1 .iconList{ display: inline-block; }
	.restaurant .r1 .iconList > div{ width: calc(100%/3 - 2rem);margin: 1rem;}
	.restaurant .r1 .iconList p{ min-height: 0px; display:block;}

	.restaurant .r2 .articalList ul{width: calc(100% / 4 - 40px)!important;}

	.restaurant .tab-list { display: inline-block;}
	.restaurant .tab-list a{width: calc(100% / 2 - 20px);}
	.restaurant .r3 .intro{ margin: 4rem 0;}

	.restaurant .tab-txt .page img{margin-bottom: 3rem;}

	.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{display: flex;flex-direction: column; align-items: center;} 

	.restaurant .tab-txt .page .group {width: 540px; padding-left:0;}

	.openTable .item li.i2, 
	.openTable .item li.i3 { min-height: 130px;}

	.restaurant .quickmenu { width:100%; }

	.restaurant .r7 .album01 .item::after { content: '';  width: 100%; height: 100%;background-image: url(../Images/industry/beverage/dialog_frame_left1.svg),url(../Images/industry/beverage/dialog_frame_right1.svg);}
	
	/* ============== bakerypos ============== */
	.bakerypos.s2 .b4 a.anchor  {transform: translateY(-420px);}
	.bakerypos .block::before{ background-size: 200% auto;}

	.bakerypos .b3 .album01 .item::after { content: '';  width: 100%; height: 100%;background-image: url(../Images/industry/beverage/dialog_frame_left1.svg),url(../Images/industry/beverage/dialog_frame_right1.svg);}

	.bakerypos .listStyle01 b{font-size: var(--fsM);}
	.bakerypos .listStyle01 p{font-size: var(--fsP);}

	.bakerypos .tab-list div{margin-bottom: 0;}
	.bakerypos .tab-list a { white-space: inherit;width: calc(100% / 2 - 20px); margin: 1rem ; text-align: center;}
	.bakerypos .tab-list div a.t1 { width: 330px;display: block;text-align: center; margin: 0.5rem auto ; }
  	.bakerypos .tab-list div{ display: block;}
	.bakerypos .tab-txt .page img{margin-bottom: 3rem;width: 100%;}
	.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{display: flex;flex-direction: column; align-items: center; margin-bottom:4rem;} 
	.bakerypos .tab-txt .page .group { width: 100%;  padding-left: 0;padding: 0 1rem;}   



	/* ABOUT 和 POS 和 WHY 統計數據  */
	.stats { padding: 5rem 1rem;}
	.stats .list {display: flex;  flex-direction: row;justify-content: space-evenly;align-items: flex-start; flex-wrap: wrap;gap:3rem 0;}
	.stats .item { padding: 0 2rem;width: calc(100% / 3);}
	.stats .label { white-space: normal;}
	.stats .label span { display: inline;}

	.stats .item:nth-child(4)::before { display: none;}
	.stats .item:nth-child(5)::before { left:-20%;}

	.pos .stats .list .item:nth-child(3) .label span{ display:block;} 
	.pos .stats .list .item:nth-child(1)  { padding: 0 1rem;}
	.pos .stats .list .item:nth-child(2)  { padding: 0 0rem;}
	.pos .stats .item:nth-child(2)::before { left: -8px!important;}
	.pos .stats .item:nth-child(3)::before { left:15px!important;}

	.pos .stats .item { padding: 0 2rem;}
	.why .stats .list {gap:1rem 0;}
	.pos .stats .list {gap:4rem 0;}
	.pos .stats .label { Width: 100%; height: calc(var(--fsP) * 3 * 1.4);}
	.why .stats .label { Width: 100%; height: calc(var(--fsP) * 2 * 1.4);}
	.why .stats .label { white-space: normal;}
	
	.why .stats .list {display: flex; flex-wrap: wrap; }
    .why .stats .item { width: 50%; }
    .why .stats .item:nth-child(n + 3) {width: calc(100% / 3); }

    .why .stats .item:nth-child(1)::before,
    .why .stats .item:nth-child(3)::before {  display: none;}
    .why .stats .item:nth-child(2)::before,
    .why .stats .item:nth-child(4)::before,
    .why .stats .item:nth-child(5)::before { display: block;}
	.why .stats .item:nth-child(5)::before{left: 0;}


	/* 共用 缐條 */
	.flow {flex-wrap: wrap;gap: 2rem;}
	.flow .item { width: calc(100% / 2 - 30px); }
	.flow::before { display: block;content: ""; position: absolute;top: 22%; bottom: 22%;left: 24%;right: 24%;width: auto; height: auto; transform: none; background-color: transparent; border: 2px solid var(--sec03); }
	
	/* pos 高度滿版 */
	.pos .flow { align-items: stretch; }
	.pos .flow .item { height: auto ; align-self: stretch ; }

	.why .w2 .flow .item { padding: 5rem 3rem 3rem 3rem; margin-bottom:4rem;}
	.why .w2 .flow .item:nth-child(3),
	.why .w2 .flow .item:nth-child(4) { margin-bottom: 1rem;}


	/* ============== ai-decision ============== */
	/* ad1 核心能力 */
	.ai-decision .ad1 .articalList.circle ul{ width: calc(100% / 2 - 20px)!important;margin:8rem 1rem 1rem 1rem;  }

	/* ad6 AI 營運閉環 */
	.ai-decision .ad6 .articalList.circle { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; width: 100%; max-width: 100%; margin:0; padding: 0 1rem; box-sizing: border-box; }
	.ai-decision .ad6 .articalList.circle .item { display: block; width: calc(50% - 20px) !important; margin: 0; }
	.ai-decision .ad6 .articalList.circle ul { width: 100% !important; padding:7rem 1rem 2rem; margin: 5rem 0 !important;}
	.ai-decision .ad6 .articalList.circle .l1 { top: -55px; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; }
	.ai-decision .ad6 .articalList.circle .l1 img{ max-width: 100%; max-height: 100%; }

	.ai-decision .ad6 .articalList.circle li.head { padding: 0; font-size: var(--fsM); font-weight: 700; text-align: center; margin-bottom: 0.4rem; color: #111; }
	.ai-decision .ad6 .articalList.circle li.head::before { display: none; }
	.ai-decision .ad6 .articalList.circle li.l3 { font-size: var(--fsP); text-align: center; justify-content: center; height: auto; }

	.ai-decision .ad6 .articalList.circle .item:nth-child(1) { order: 1; }
	.ai-decision .ad6 .articalList.circle .item:nth-child(2) { order: 2; }
	.ai-decision .ad6 .articalList.circle .item:nth-child(6) { order: 3; }
	.ai-decision .ad6 .articalList.circle .item:nth-child(3) { order: 4; }
	.ai-decision .ad6 .articalList.circle .item:nth-child(5) { order: 5; }
	.ai-decision .ad6 .articalList.circle .item:nth-child(4) { order: 6; }

	.ai-decision .ad6 .articalList.circle .item ul::after, .ai-decision .ad6 .articalList.circle .item:not(:first-child) ul::after { content: ''; display: block; position: absolute; width: 22px; height: 18px; background-image: url(../Images/product/ai-decision/ad6-arrow.svg); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 10; }

	.ai-decision .ad6 .articalList.circle .item:nth-child(1) ul::after { right: -22px; left: auto; top: 50%; bottom: auto; transform: translate(50%, -50%) rotate(0deg); }
	.ai-decision .ad6 .articalList.circle .item:nth-child(4) ul::after { display: block !important; left: -22px; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%) rotate(180deg); }
	.ai-decision .ad6 .articalList.circle .item:nth-child(2) ul::after, .ai-decision .ad6 .articalList.circle .item:nth-child(3) ul::after { left: 50%; right: auto; top: auto; bottom: -26px; transform: translate(-50%, 50%) rotate(90deg); }
	.ai-decision .ad6 .articalList.circle .item:nth-child(5) ul::after, .ai-decision .ad6 .articalList.circle .item:nth-child(6) ul::after { left: 50%; right: auto; top: -80px; bottom: auto; transform: translate(-50%, -50%) rotate(-90deg); }

	.ai-decision .ad6 li.head b{ display: block; }

	/* ad7 可量化效益 */
	.ai-decision .articalList ul{ width: calc(100% / 3 - 20px)!important;margin: 10px 10px 40px 10px;}

	/* ad4 多角色營運效益 共用 */
	.roleList{padding: 0 1.5rem;}
	.roleList .item { display: flex; flex-direction: column; align-items: flex-end;gap: 1.5rem; margin-bottom: 2rem;}
	.roleList .item.i2 {display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0; }
	.roleList .dialogbox { width: 100%;flex-direction: column; padding: 3rem; text-align: center; } 
	.roleList .item.i2 .dialogbox {display: flex; flex-direction: column-reverse;}
	.roleList .dialogbox .info { width: 100%; padding: 0; text-align: center; }
	
	.roleList .dialogbox .dialogue li {font-size: 27px;}
	.roleList .dialogbox .info li.l1,
	.roleList .dialogbox .info li.l2{text-align: left; }
	.roleList .dialogbox .info li.l2{ margin-bottom: 2rem;}
	.roleList .dialogbox .info li.l3 { text-align: left; margin-bottom: 2rem; }
	.roleList .item.i2 .dialogbox .info{ padding-left: 0;}

	.roleList .dialogbox .dialogue { width: 100%;min-height: auto; }
	.roleList .dialogbox .dialogue li { text-align: center; }
	.ai-decision .roleList .item.i2 img{ width: 300px; }

	/* ============== ai-patrol ============== */
	/* ad1 */
	.ai-patrol .ap1 .group{ justify-content: center;}
	.ai-patrol .ap1 .item {width: calc(100% / 2 - 20px);margin: 1rem ; }
	.ai-patrol .ap1 .group .name{ padding: 2rem;}
	.ai-patrol .ap1 .name h5 { font-size: var(--fsL);}

	.ai-patrol .ap2 .roleList .dialogbox .dialogue{width: 100%;}

}


@media screen and (max-width: 800px) {
	.bodybox .block { padding: var(--pd2) 0 var(--pd2) 0;}
	/* .bodybox .block { padding: var(--pd2) 0 0 0;} */

	.caseLogoList .listBox li,
	.case .caseLogoList .listBox li,
	.partnerList .listBox .ditem{width: calc(100%/2 - 20px);}
	
	.articalList.s2 ul{width: calc(100% / 2 - 20px)!important;}
	.caseLogoList.s2 .listBox li{width: calc(100%/3 - 40px);}
	
	footer .ribbons .R, 
	footer .ribbons .L{ font-size: var(--fsS);}

	.mainContent .inPagekv{ height: 460px;}

	/* 快速瀏覽 anchorbox from beverage */
	.anchorbox b.title{padding: 15px 3.5rem; }
	.anchorbox dl,
	.anchorbox ul { padding: 0 3.5rem; margin: 2.5rem 0 0 0; width:100%; } 
	.anchorbox dl {margin: 1rem auto 3rem;} 
	.anchorbox ul {margin: 0 auto 3rem;}
	.anchorbox dl:first-of-type, .anchorbox ul:first-of-type {border-right: 0px; margin: 3rem auto 0;}

	.htmlEditor .anchorbox dl,
	.htmlEditor .anchorbox ul,
	.cke_editable .anchorbox dl,
	.cke_editable .anchorbox ul { padding: 0 3.5rem; margin: 2.5rem 0 0 0; width:100%; } 


    /* ============== error ============== */
    .erro .info{margin:-350px 0 0 -155px;}
    .erro .mainContent{background-image:url(../Images/erro-m.jpg);}
    .erro .info b{font-size:165px; line-height: 130px;}
	
	/* ============== 產品頁-發票加值系統 einvoice ============== */
	.bodybox.einvoice .inPagekv{ height: 455px;}
		
	.articalList.box ul{width: calc(100% / 2 - 20px)!important;}

	.einvoice .block.e4::before,
	.einvoice .block.e6::before,
	.einvoice .block.e10::before { top: -100px;}

	.einvoice .block.e4::before,
	.einvoice .block.e6::before { padding-top: 100%;}

	.einvoice .e8 li:last-child{ text-align: center;}
	
	/* ============== industry/beverage 茶飲 ============== */
	.beverage .articalList ul{width: calc(100% / 2 - 50px)!important; margin: 25px;}

	.beverage .b7 .album01 .item{ flex-direction: column; align-items: center; padding: 40px 5px;}
	.beverage .b7 .album01 a.UI{ margin-top: -90px;}
	
	.beverage .b7 .album01 .list{ padding: 60px 0; }
	.beverage .b7 .album01 .item::after{ content: ''; position: absolute; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left.svg),url(../Images/industry/beverage/dialog_frame_right.svg); }

	/* ============== 聯絡我們 ============== */
	.contactBlock .block.c2{margin: -250px 0 -100px;}
	.mapbox .loc{ transform: scale(.6); transform-origin: top center; margin-left: 50px;}
	.mapbox .txt{ height: 468px;} /* transform: translateY(calc(0px - var(--pd))); */
	.mapbox .txt .wd{ bottom: var(--pd);}
	.mapbox .map{ height: 468px; background-position: calc(50% + 50px) 0;}
	.contactBlock .mapbox .map,
	.contactBlock .mapbox .loc, 
	.contactBlock .mapbox .txt, 
	.contactBlock .mapbox .info, 
	.mapbox .info{height: 771px;}
	.contactBlock .mapbox .loc{transform-origin: center;}
	.mapbox .info ul{ top: auto; left: auto; bottom: 120px; right: var(--pdh); }
	.mapbox .txt .wd{ font-size: var(--fsM);}
	
	/* ============== 產品頁-自助點餐機 kiosk ============== */
	.kiosk .k1 .articalList ul{width: calc(100% / 2 - 20px)!important; }

	.kiosk .k2 .container-belt{display: flex;flex-direction: column;}
	.kiosk .k2 .txt{width: 100%; }
	.kiosk .k2 dl{ margin-bottom: 2.5rem;}
	.kiosk .k2 .photo{ width: 80%;}
	.kiosk .k2 .pager{padding: 0 0 1.5rem 0;}

	.kiosk .k3 .item .group img { width: 300px;}
	.kiosk .k3 .list .item { width: calc(100% / 1 - 20px);}
	.kiosk .k3 .item .keywords span { width: calc(40% - 10px);}
	.kiosk .k3 .item .features {white-space: nowrap;}

	.kiosk .k6 .iconList img { width: 150px; height: 150px; margin: auto 1.5rem;}
	.kiosk .k6 .iconList .txt{ text-align: left; margin: auto 1.5rem;}
	.kiosk .k6 .iconList > div{ display: flex;width:100%; margin: 0;margin-bottom: 2.5rem; align-items: center; height: auto;}
	.kiosk .k6 .iconList ul li{font-size: var(--fsS);}
	.kiosk .k6 .iconList p,
	.kiosk .k6 .iconList ul {display: inline-block;}
	.kiosk .k6 .iconList b {margin-bottom: 1.5rem;}
	.kiosk .k6 a.btn{display: none;}

	/* .kioskProduct .group{right: 588px;} */
	.kioskProduct .group{transform: none; }
	.kioskProduct a.UI,
	.kioskProduct .pager{display: inline-block;}

	.kioskProduct .item.kp2 li::before,
	.kioskProduct .item.kp3 li::before,
	.kioskProduct .item.kp4 li::before{position: absolute; left: 0; width: 25%;display: flex;}

	.kioskProduct .item { width: 100%;display: inline-block; padding: 0 1.5rem;}
	.kioskProduct .item li { width: 100%; padding: 0 5% 0 30%;}
	.kioskProduct .item li.i1 {padding: 0%;}
	.kioskProduct .item.kp1 li::before { position: absolute; left: 0; width: 25%;}
	.kioskProduct .item li.i2{border-radius: 20px 20px 0 0;}
	.kioskProduct .item li.i10{border-radius: 0 0 20px 20px;}
	.kioskProduct .item.kp4 li.i2{border-radius: 20px 20px 0 0;}
	.kioskProduct .item.kp4 li.i10{border-radius: 0 0 20px 20px;}
	
	.kioskProduct {position: relative; }
	.kioskProduct 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:250px; transition: .3s; border: 2px solid var(--sec05);}
	.kioskProduct a.UI::before{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
	.kioskProduct a.UI.prev{ left: 20px;}
	.kioskProduct a.UI.next{ right: 20px;}
	.kioskProduct a.UI:hover{ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.3)); color: var(--sec02);}

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

	.kiosk .k9 .mapbox .txt .wd{ left: 45%;}


	.kiosk .k12 .item{ width: calc(100% / 1); }
	.kiosk .k12 .txt li.k2 {padding-right: 0;}
	.kiosk .k12 .txt::after{ width: 170px;}
	.kiosk .k12 a.btn{ font-size: 20px;}

	
	/* ============== why ============== */
	.w1 .graphic .circle{ width: 130px;}
	.why .w6 .map{ margin-top: -10rem;}
	.w6 .map .loc .txt{ font-size: 14px;} 
	.w6 .map .loc .txt b.b1 { font-size: 20px;}
	.w6 .map .loc.m1 .txt{ left: -5.5%; }
	.w6 .map .loc.m2 .txt{ left: -14%; }
	.w6 .map .loc.m3 .txt{ left: 10%; }
	.w6 .txt span{ font-size:14px;margin:0;}

	.why .w7 .articalList .group ul{ width: calc(100%/3 - 20px)!important;}

	/* ============== about ============== */
	.about .a1 .wd dt{ font-size: var(--fsM2);}
	.about .a1 .wd dt b{ font-size: var(--fsL);}
	
	.txt-pic {display: block;}
	.txt-pic img {width: 100%; }
	
	.about .a4 .txt-pic img{ margin: 0 0 5rem 0;}
	.about .a6 .txt-pic img{ margin: 5rem 0 0 0;}
	.about .a6 .txt-pic {display: flex;flex-direction: column-reverse; }
	.about .a7 .txt-pic img{ margin: 5rem 0 0 0;}
	.txt-pic .title { text-align: center;}

	/* mapbox */
	.about .mapbox {padding-top: 200px;} 
	.about .mapbox h2.title{margin-top: -200px;}

	/* ============== restaurant ============== */
	a.btn.fold{display: none;}
	.restaurant .r4 a.btn.fold{display: block;}

	.restaurant .block::before { top: -70px!important; }

	.restaurant .r1 .iconList .icon {width: 295px;}
	.restaurant .r1 .iconList .icon::after { height: 100%;}
	.restaurant .r1 .iconList .txt{ text-align: left; margin: auto 1.5rem; width: 100%;}
	.restaurant .r1 .iconList > div{ display: flex;justify-content: space-evenly; width:100%; margin: 0;margin-bottom: 2.5rem; align-items: center; height: auto;}
	.restaurant .r1 .iconList ul li{font-size: var(--fsS);}
	.restaurant .r1 .iconList p.intro,
	.restaurant .r1 .iconList ul {display: block;}

	.restaurant .r2 .articalList ul{width: calc(100% / 2 - 40px)!important;}

	/* openTable */
	.openTable .item li.i1 { border-radius: 20px 20px 0 0; }
	.openTable .item li.i3 { border-radius: 0 0 20px 20px; }
	.openTable .item li.i1::before { border-radius: 20px 0 0 0; border-right: 0px;}
    .openTable .item.kp4 li.i1{ border-radius: 20px 20px 0 0 ;}
    .openTable .item.kp4 li.i3{ border-radius: 0 0 20px 20px ;}
    .openTable .item.kp4 li.i20{ border-radius: 0 0 20px 20px ;}

    .openTable.showall .item.kp4 li.i3{ border-radius: 0 0 0 20px ;}
	.openTable.showall .item li.i20 { border-radius: 0 0 20px 20px; }
	.openTable.showall .item.kp4 li.i20{border-radius: 0 0 20px 20px;}
	
	.openTable.showall .item.kp1 .i4 span,
	.openTable.showall .item.kp2 .i4 span,
	.openTable.showall .item.kp3 .i4 span,
	.openTable.showall .item.kp4 .i4 span { display: block; color: inherit; }
	.openTable.showall .item.kp4 .i4 { font-size: 28px;}
	.openTable.showall .item.kp4 .i4 span { padding-left : 7rem;}


	.openTable .group{transform: none; }
	.openTable a.UI,
	.openTable .pager{display: inline-block;}

	.openTable .item li.i1 ,
	.openTable .item li.i4{ font-size: 28px; font-weight: 600;}
	.openTable .item li::before { font-size: 25px; }

	.openTable .item.kp2 li::before,
	.openTable .item.kp3 li::before,
	.openTable .item.kp4 li::before{position: absolute; left: 0; width: 25%;display: flex;}

	.openTable .item { width: 100%;display: inline-block; padding: 0 1.5rem;}
	.openTable .item li { width: 100%; padding: 0 2% 0 52%;}
	.openTable .item li.i1 {padding: 0%;}
	.openTable .item.kp1 li::before,
	.openTable .item.kp2 li::before,
	.openTable .item.kp3 li::before,
	.openTable .item.kp4 li::before { position: absolute; left: 0; width: 50%; }

	.openTable .item li:nth-of-type(1),
	.openTable .item li:nth-of-type(n+4) { min-height: 70px;}

	.openTable .item.kp1 li.i1::before, .openTable .item.kp1 li.i4::before,
	.openTable .item.kp2 li.i1::before, .openTable .item.kp2 li.i4::before,
	.openTable .item.kp3 li.i1::before, .openTable .item.kp3 li.i4::before,
	.openTable .item.kp4 li.i1::before, .openTable .item.kp4 li.i4::before{ width: 0%; border-bottom: 0px;}

	.openTable .item li::before{ border-bottom: 1px solid #ffffff; }
	
	.openTable .item.kp1 .i4,
	.openTable .item.kp3 .i4,
	.openTable .item.kp4 .i4 { color: inherit; }

	.openTable .pager{ display: block;text-align: center; }
	.openTable .pager a{ width: 10px; height: 10px; border-radius: 50%; margin: 0 1rem; display: inline-block; vertical-align: middle; background-color: #D9D9D9; transition: .3s;}
	.openTable .pager a.UI{ font-size: 0; width: auto; height: auto; border-radius: 50%; margin: 0 5px; background-color: transparent!important; color: #D9D9D9; }
	.openTable .pager a.UI::before{ font-size: var(--fsL);}
	.openTable .pager a.focus,
	.openTable .pager a:hover{ background-color: var(--sec02);}
	.openTable .pager a.UI:hover{ color: var(--sec02);}

	.restaurant .r7 .album01 .item{ flex-direction: column; align-items: center; padding: 40px 5px;}
	
	.restaurant .r7 .album01 .item::after{ content: ''; position: absolute; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left.svg),url(../Images/industry/beverage/dialog_frame_right.svg); }
	.restaurant .r7 .album01 .item li.a4 span{background-color: #F4F1EB;}

	/* ============== bakerypos ============== */
	.bakerypos .anchorbox dl:last-of-type{margin: 0 auto 3rem;} 

	.bakerypos .b3 .album01 .item{ flex-direction: column; align-items: center; padding: 40px 5px;}
	.bakerypos .b3 .album01 .item::after{ content: ''; position: absolute; width: 100%; height: 100%; background-image: url(../Images/industry/beverage/dialog_frame_left.svg),url(../Images/industry/beverage/dialog_frame_right.svg); }
	.bakerypos .b3 .album01 .item li.a4 span{background-color: #F4F1EB;}

	/* ============== Sitemap 網站地圖 ============== */
	.maplist{ padding: 0 2rem 4rem;}
	.maplist li > dl{ width: 100%; padding-bottom: 0; }
	.maplist a:hover{ color: #000!important;}

	/* ============== anchorbox02 ============== */
	.anchorbox02 { display: block; height: auto; background: #fff; border: 1px solid #AC4EEA; position: relative; }
	.anchorbox02 .arrow-left, .anchorbox02 .arrow-right { display: none; }
	.anchorbox02 .title { width: 100%; height: 70px; border: none !important; border-radius: 999px; justify-content: center; cursor: pointer; }
	.anchorbox02 .title::before { content: 'keyboard_arrow_down'; position: absolute; right: 16rem; color: #EA0060; font-size: var(--fsL); transition: transform 0.25s ease; }
	.anchorbox02.show .title::before { transform: rotate(180deg); }
	.anchorbox02 .scroll { display: none; position: absolute; top: 100%; margin-top: 2rem; left: 0; right: 0; height: auto; max-height: 60vh; overflow-x: hidden; overflow-y: auto; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); z-index: 10; overflow: hidden; }
	.anchorbox02.show .scroll { display: block; }
	.anchorbox02 .list { display: flex; flex-direction: column; height: auto; padding: 1rem 0; white-space: normal; }
	.anchorbox02 .list::after { display: none; }
	.anchorbox02 .list li { display: block; height: auto; padding: 0; border-radius: 20px; }
	.anchorbox02 .list li a { display: flex; height: auto; padding: 1.5rem; color: #000; }
	.anchorbox02 li a::after { display: none; }



	/* ============== ai-patrol ============== */
	/* ap4 智慧巡檢架構 */
	/* .ai-patrol .ap3 .group .item .descBox{min-height: auto;} */
    .ai-patrol .ap3 .group { flex-direction: column; gap: 2rem; align-items: center; padding: 0 1.5rem; }
    .ai-patrol .ap3 .group .item { width: 100%; max-width: 100%; min-height: 460px; }
    .ai-patrol .ap3 .group .stepArrow { flex-direction: column; width: 100%; margin: 0.5rem 0; gap: 0.8rem; }
    .ai-patrol .ap3 .group .stepArrow span { order: 1; font-size: var(--fsM); width: auto; text-align: center; font-weight: 500; }
    .ai-patrol .ap3 .group .stepArrow .arrowIcon { order: 2; transform: rotate(180deg); width: 40px; height: 54px; }
	.ai-patrol .ap3 .group .item::after {bottom: 190px; }

	/* ap4 tab-switch */
	.ai-patrol .tab-list div { display: flex;flex-wrap: wrap;}
	.ai-patrol .tab-list a{width: calc(100%/2 - 30px); margin: 10px 10px;}
	.ai-patrol .tab-txt .page { flex-direction: column; align-items: center; }
	.ai-patrol .tab-txt .page img { width: 100%; max-width: 100%; border-radius: 25px; margin-bottom: 3rem; }
	.ai-patrol .tab-txt .page .group { width: 100%; padding-left: 0; }
	.ai-patrol .tab-txt .page .group h5.title { display: none; }
	.ai-patrol .tab-txt .page .group .list h5 { display: none; }
	.ai-patrol .tab-txt .page .mob-title { display: block; font-size: var(--fsM); font-weight: 500; color: #000000; text-align: center; margin-bottom:3rem; letter-spacing: 1px; }
	.ai-patrol .tab-txt .page .mob-title b {  font-size: var(--fsM); font-weight: 600; margin-right: 1rem;  }
	.ai-patrol .tab-txt .page .mob-title span { color: #FA5699; font-weight: 500; }
	.ai-patrol .tab-txt .page .list{ border-top: 0px ;}

	/* ap6 產業應用場景 */
	.ai-patrol .ap6 .item{ width: calc(100%/1);}

	/* ap7 彈性方案 */
    .gradientCards { flex-direction: column; align-items: center; gap:3rem; margin: 4rem 0; padding: 0 1.5rem;}
    .gradientCards .ampersand {  margin-bottom: 1.5rem; }
    .gradientCards .card { width: 100%; max-width:100%; }
    
	.gradientCards .card, 
	.gradientCards .card1, 
	.gradientCards .card2{ width: 100%; max-width: 100%; }

	.ap7 .gradientCards{gap: 9rem;}
	.ad7 .card .group .title { font-size: var(--fsL); }
    .ad7 .card .group .sub { font-size: var(--fsP); }

    .ap8 .card .pic { width: 180px; height: 180px; }



}

@media screen and (max-width: 640px) {
	:root{
		--fsXS:1.6rem; 	/* font size XS */
		--fsS: 2rem; 	/* font size S */
		--fsP: 2.4rem; 	/* font size P */
		--fsM: 3rem; 	/* font size M */
		--fsM2:3.6rem; 	/* font size M2 */
		--fsL: 4rem; 	/* font size L */
		--fsXL:4.8rem; 	/* font size XL */
		--fsXL2:5.6rem; /* font size XL2 */
		--maxW:640px;	/* general max-width */
		--pd:3.6rem; 			
	}
	.pc640{ display: none!important;}
	.mobile640{ display: inline-block!important;}
	
	h2.title{ font-size: 40px; line-height: 1.5;}
	h2.title+span{ font-size: var(--fsP);}
	h5.title .en{ font-size: 45px; margin-bottom: 5px;}
	h3.subtitle { font-size: 32px;line-height: 1.5; }
/*	h5.title .ch{ font-size: 36px;}*/
	
	.container-belt{ padding: 0;}
	.container,
	.topbanner .container,
	.block > .container,
	.block > .container-belt{padding: 0 calc(var(--pdh));}
	
	.inPage .mainTop .main{ padding: 0;}
	.inPage .mainTop .social-link{ padding-right: 0; margin-top: 10px;}

	/* header */
	/* .index a.mobilemenu,
	.index.s1 a.mobilemenu, 
	.index.s2 a.mobilemenu{ right: 35px;} */
	/* .index header{ padding-left: var(--pdh); padding-right: var(--pdh);} */
	header .mheader .container{ padding: 0 calc(var(--pdh));}
	/* .index header .mheader .container{ padding: 0 calc(var(--pdh));} */

	/* 其他共用 */
	.caseDemoList li{ width: calc(100% - 30px);}
	.caseLogoList.s2 .listBox li{width: calc(100%/2 - 40px);}

	.eval_list .item{ width: calc(100% - 2rem);}
	.eval_list .item .e1::after{ padding-top: 20%;}
	/* .eval_list .item .e2{ margin: 0 0 10px;} */
	/* .eval_list .item .e2 b{font-size: var(--fsXL2);} */
	/* .eval_list .item .e2 b > span{font-size: var(--fsP);} */
	.eval_list .item .e3::after{ bottom: -27px;}
	
	/* width */
	footer .footerMenu .list{ padding-top: 35px; padding-left: 50px;}
	footer .footerMenu ul{width: calc(100%/2); margin-top: 20px;}

	footer .contactBox{ background-position: center; background-image: url(../Images/moreBanner5m.jpg);}
	.contactUs .contactBox .word{ width: 60%; left: 50%; transform: translate(-50%, -23%);}
	
	.topbanner{padding-top: 0;}
	.topbanner .group{ width: 100%;}
	.topbanner .mov{ width: 100%; margin: 0 0 30px;}
	
	/* ============== index ============== */
	.index block.KV {width: calc(100% - var(--pd));}
	block.KV{ border-radius: 20px;}
	block.KV::after{ display: none;}
	block.KV .pager{ width: calc(100% - 60px); text-align: center; bottom: 5px;}
	
	.index .mainContent .container.c1{ margin-top: 40px;}
	block.solution{ padding-top: 20px;}
	block.case .listBox li {width: calc(100% / 2 - 10px);}
	.index .so-img li p{ font-size: var(--fsS); line-height: 1.2; bottom: 22px; }
	.solution-list .part .control{ width: calc(100% - 20px); text-align: center; bottom: 2px;}
	.solution-list .part .control a.UI,
	block.KV a.UI{ display: none;}
	.solution-list .part .control .pager a,
	block.KV .pager a{width: 20px; height: 5px; border-radius: 4px; margin: 0 2px;}
	
	/* ============== 新聞列表 ============== */
	.about.news .aboutBox,
	.about.newsPage .aboutIn{ padding: 0;}
	.inPage .mainTop .pic{ width: 100%;}
	
	/* ============== 聯絡我們 ============== */
	.contactBlock .contactPage{ padding: 0;}
	
	/* ============== 資源與活動 ============== */
	.eventsIn{ padding: 0;}
	
	/* ============== 成功案例 ============== */
	.caseBox .listBox li b{ filter: grayscale(0%);}
	
	/* ============== 產品頁-SaaS服務中台 laas ============== */
	.laas .block.l3 img{height:590px; left:-310px; top:-90px;}
	.laas .block.l3 h4{ width: 80%; top:65%; left: 10%;}
	.laas .block.bg-shape::after,
	.laas .block.bg-shape::before{opacity: 1;}
    .laas .block.l1 .right{margin-top:4px; width:100%;}
    
    /* ============== 產品頁-手持行動點餐機 mPOS ============== */
    .product.mPOS{}
    .product.mPOS h2{letter-spacing:0;}
    .bodybox.mPOS .inPagekv{margin-bottom:200px;}
    .product.mPOS .inPagekv dl {bottom: -170px;}
    .mPOS .list1{display:flex; justify-content:space-between; flex-wrap:wrap;}
    .mPOS .list1 ul{width:calc(100% / 2 - 40px);}
    .product.mPOS .item.i4 dl{width:50%;}
    .product.mPOS .item.i3 dl{width:50%;}
    .product.mPOS .item dd{font-size:var(--fsS);}
    .product.mPOS .block2 .container{flex-direction:column;}
    .product.mPOS .block2 ul{width:100%; margin-left:0;}
    .product.mPOS .block2 li{margin-top:30px;}
    .product.mPOS .block2 li br{display:none;}
	
	/* ============== KDS廚房系統 kds ============== */
	.kds .block.b2 > .container-belt{ padding: 0;}
	.kds .block.b4::after{ top: -200px;}
    
    
    .about .a3 .container-belt{display:flex; justify-content: space-between; align-items: center; flex-direction: column;}
    .about .a3 h5.title{text-align: center; margin-top: 30px;}
    .about .a3 .group {padding-left:0;}
    .about .a4 p{position:absolute; bottom: 200px; right: 50%; font-size: var(--fsM); margin-right: -165px;}
    .about .a5.bg-shape.G02::before { content: " "; width: 2000px; height: 730px; background-size: 50%; background-position: center; top: -125px; left: 50%; z-index: 0; margin-left: -1000px;}
    .about .a5 .container{flex-direction:column; margin:0 0 30px 0;}
    .about .a5 .txt{margin:0px 0 30px 0;}
    .about .a4.bg-shape::before{display:none;}
    
    /* ============== 超級店長 ============== */
    .mStore .block.b2 .tagList{height:315px;}
    .mStore .block.b2 a.tag1, 
    .mStore .block.b2 a.tag2, 
    .mStore .block.b2 a.tag3, 
    .mStore .block.b2 a.tag4 {width: calc((100% / 2) - 5px); height: 150px;}
	
	/* ============== 產品頁-AI ============== */
	.AI .a4::before{ padding-top: 350%; background-size: 200% auto!important;}
	
	.AI .a3::before,
	.AI .a5::before,
	.AI .a7::before{ height: 100%; padding: 0; background-size: auto 130%!important; background-position: center bottom!important;}
	
	.AI .a8 > .container-belt{ padding: 0;}
	.AI .a8 h4.title{padding: 0 calc(var(--pdh));}
	
	/* ============== 產品頁-POS ============== */
	ul.tabList > li{ width: 100%; margin-bottom: 5px;}
	.pos .tab-list a{ font-size: var(--fsP);}

	.pos .tableSet li span{ display: block; }
	
	.pos .tableSet ul:nth-child(even) {background-color:transparent; } 
	.pos .tableSet ul:nth-child(1) li {font-size: var(--fsM);}

	.pos .tableSet ul li { display: inline-block; border-bottom: solid 0px;}
	.pos .tableSet ul li:nth-child(1){width: 100%; display: block; padding: 1rem;}
	.pos .tableSet ul li:nth-child(2),
	.pos .tableSet ul li:nth-child(3){width: 50%; display: inline-block; }

	.pos .tableSet ul:first-child li:first-child { display: none;}
	.pos .tableSet ul:last-child li:first-child {border-bottom-left-radius: 0px;}
	.pos .tableSet ul li:nth-child(2){border-top-left-radius: 20px;}

	/* ============== 產品頁-TQG ============== */
	.t2 .chartbox{ max-width: none; padding: 12rem 0 14rem;}
	.t2 .chartbox .txtbox .txt{ font-size: var(--fsS);}
	.t2 .chartbox .txtbox .txt.t3 dd::before,
	.t2 .chartbox .txtbox .txt.t4 dd::before{ top: calc(-6rem - var(--fsS)*1.5 - 6px - 1rem);}
	.t2 .chartbox .txtbox .txt.t3 dd::after,
	.t2 .chartbox .txtbox .txt.t4 dd::after{top: calc(-6rem - var(--fsS)*1.5 - 6px - 1rem - 6px); }
	.t2 .chartbox .linkbox a.a1,
	.t2 .chartbox .linkbox a.a3{width: 55%;}
	.t2 .chartbox .linkbox a.a2,
	.t2 .chartbox .linkbox a.a4{width: 45%;}

	.tqg .mapbox h4.title{top: -50px;}

    /* ============== error ============== */
    .erro .info{margin:-345px 0 0 -165px;}
	
	/* ============== industry/beverage 茶飲 ============== */
	a.anchor{width: 0;height: 0; position:relative; transform:translateY(-175px); display: block;} 
	.s1 a.anchor{width: 0;height: 0; position:relative; transform:translateY(-86px);} 
	.s2 a.anchor{width: 0;height: 0; position:relative; transform:translateY(-80px);} 

	.htmlEditor a[id][name] {width: 0;height: 0; position:relative; transform:translateY(-175px); display: block;} 
	.s1 .htmlEditor a[id][name]{width: 0;height: 0; position:relative; transform:translateY(-86px);} 
	.s2 .htmlEditor a[id][name]{width: 0;height: 0; position:relative; transform:translateY(-80px);} 

	.beverage h4.title{ font-size: 0;}

	.pointer-map{ margin-bottom: 200px;}
	.pointer-map > dl{ top: 100%!important; left: 50%!important; transform: translateX(-50%); width: 80%; padding: var(--pd); }
	
	.beverage .b2 .tableSet,
	.beverage .b2 .tableSet > ul,
	.beverage .b2 .tableSet > ul > li{ display: inline-block; width: 100%; background-image: none; padding-bottom: 0;}
	.beverage .b2 .tableSet > ul > li.pic{ padding: 0; padding-bottom: var(--pd); text-align: center; position: relative;}
	.beverage .b2 .tableSet > ul > li.pic::after{ content: ''; display: block; width: 70%; padding-top: 70%; 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 li{ padding: 0 2.5rem;}
	
	.beverage .articalList.s2 .group ul { height: 350px; display: flex; align-items: center;}


	.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;}

	.beverage .block.b2 .tableSet ul dl{ transform: translateY(0%)!important; opacity: 1!important;}


	.iconList{ flex-direction: column;}
	.iconList > div{ width: 100%; margin-bottom: 20px; padding: var(--pdq);}
	
	.beverage .b7 .album01 .item { height: 430px;}

	.FAQ dd .cq01, 
	.FAQ dd .cq02 { padding:1rem 1rem 1rem 90px;}

	/* ======== service/maintenance 維運服務 ========= */
	.mainten .t1 .m5 .article h5{ right: 0;}
	.mainten .t1 .m5 .article .map{width: 30%;}
	.mainten .m1 .moviebox{height: 440px;}
	
	/* ============== 產品頁-自助點餐機 kiosk ============== */
	.kiosk .k1 .articalList ul{width: calc(100% / 2 - 20px)!important; height: 350px;}
	
	.kiosk .k3 .item .keywords span { width: calc(50% - 10px);}

	.kiosk .pointer-map{ margin-bottom: 200px;}
	.kiosk .pointer-map > dl{ top: 100%!important; left: 50%!important; transform: translateX(-50%); width: 80%;}

	.kiosk .block.k8::before { top: -140px;}
	.kiosk .block.k9 {padding-top: 270px;}
	.kiosk .block.k9::before{ top: -50px;}
	.kiosk .mapbox h2.title,
	.kiosk .mapbox h2.title + span {top: -130px;position: relative;}

	/* 共用 - 痛點 解方*/
	.painSolution .item{width: calc(100% / 1 );margin: 0;margin-bottom: 3rem;}
	.painSolution ul.list:nth-child(1) li:last-child,
	.painSolution ul.list:nth-child(2) li:last-child{height:auto;}

	/* ============== why ============== */
	.why .w2{ padding: 0;}
	.why .w3.bg::before{ top: -50px;}
	.why .w4.bg::before{ top: -170px;}
	
	.why .w7 .articalList .group ul{ width: calc(100%/2 - 20px)!important;}

	.why .block {padding: var(--pd2) 0 var(--pd2) 0 !important;}

	/* mapbox */
	.bodybox .block.a2a { padding: 2rem 0 var(--pd3) 0; }

	.about .mapbox {padding-top: 400px;} 
	.about .mapbox h2.title{margin-top: -400px;}

	/* ============== restaurant ============== */
	.restaurant .tab-txt .page img{width: 100%;}
	
	.restaurant .quickmenu { left:0;}
	.restaurant .quickmenu p {font-size: 26px;font-weight: 600; }
	.restaurant .quickmenu a{font-size: 23px;}

	.restaurant .tab-list a{ font-size: 28px; }
	.restaurant .tab-txt .page .group h5.title .ch span{ margin: 1rem 0 0 0; display: block;}
	.restaurant .tab-txt .page .group h5 b.UI {font-size: 28px;}
	.restaurant .tab-txt .page .group h5.title .note{ font-size: 20px;}
	.restaurant .tab-txt .page .group li{ font-size: 22px;}

	.openTable.showall ul li span {font-size: 22px;}

	.restaurant .r7 .album01 .item { height: 430px;}
	/* 3個客戶證言寫法 */
	/* .restaurant .r7 .album01 .group{ height: 450px;}
	.restaurant .r7 .album01 .item { width: calc(100% / 1);}
	.restaurant .r7 .album01 .item li.a3 { padding: 3rem;}
	.restaurant .r7 .album01 .item li.a3 { margin-bottom: 0;} */

	/* ============== bakerypos ============== */
	.bakerypos .b1 .articalList ul{width: calc(100% / 1 - 20px)!important; margin-bottom :5rem;}

	.bakerypos .b3 .album01 .item { height: 430px;}

	/* ============== 掃碼點餐 online ============== */
	.articalList.circle ul{margin: 90px 10px 10px 10px;  width: calc(100% / 2 - 20px) !important;}


	/* ============== about ============== */
	.about .tableSet ul li { display: block; width: 100%; text-align: center;}
	.about .tableSet ul li:nth-child(1){ width: 100%;padding: 1rem; }
	.about .tableSet ul:nth-child(even) {background-color:transparent; }
	.about .tableSet ul:last-child li:first-child {border-bottom-left-radius: 0px;}
	.about .tableSet ul:first-child li:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px;}
  	.about .tableSet ul:last-child li:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}


	/* ============== ai-decision ============== */
	.br{ display: block!important;}
	.br.pc{ display: inline-block!important;}
	.br.mobile{ display: block!important;}

	/* ad2 智慧三層架構 */
	.stepList { padding: 0 2rem;flex-direction: column; align-items: center;gap: 6rem;margin: 4rem auto;width: 100%;}
	.stepList .item {width: 100%;padding: 6.5rem 4rem 4rem 4rem;}
	.stepList .item:not(:last-child)::after {right: auto;left: 50%; top: auto; bottom: -16px;transform: translateX(-50%) rotate(135deg); }

	.ai-decision .ad4::after { bottom: 0; top: auto; background-position: bottom center; background-size: 1920px auto; }

	/* ad3 ai tableSet */
	.ai.tableSet li span { display: block; }
	.ai.tableSet ul { display: flex; flex-wrap: wrap; width: 100%; }
	.ai.tableSet ul:nth-child(1) li { font-size: var(--fsM); }
	
	.ai.tableSet b.company,
	.ai.tableSet b.wixtarai { display: none !important; }
	.ai.tableSet ul:nth-of-type(even) li:nth-child(2) { background-color: #F0F0F0; }
	
	.ai.tableSet ul li { display: inline-block; vertical-align: top; border-bottom: solid 0px; }
	.ai.tableSet ul:first-child li:first-child { display: none; }
	.ai.tableSet ul:nth-child(1) li span {text-align: center;}
	.ai.tableSet ul li:nth-child(1) { width: 100%; background-color: #fff; padding: 1rem; z-index: 1; position: relative;}
	.ai.tableSet ul li:nth-child(2),
	.ai.tableSet ul li:nth-child(3) {width: 50%; align-self: stretch; display: flex; flex-direction: column; justify-content: center; vertical-align: middle;}
	.ai.tableSet ul li:nth-child(3){background: linear-gradient(90deg, #FBDDED 0%, #E1E6FA 50%, #CFF5F9 100%);}

	.ai-decision .ad3 .intro span.arrow { display: block; margin: 1rem auto; transform: rotate(90deg); }
	.ai-decision .ad3 .intro span.highlight { font-size: var(--fsM); }
	.ai-decision .ad3 .intro span.highlight-none { font-size: var(--fsP); }

	/* ad5 三段式營運顧問 tab-switch */
	.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; flex-direction: column; align-items: center; }
	.ai-decision .ad5 .tab-txt .page .group, 
	.ai-decision .ad5 .tab-txt .page .list { display: contents; }
	.ai-decision .ad5 .tab-txt .page .group h5.title { order: 1; display: flex; flex-direction: column-reverse; align-items: center; border-bottom: none; margin-bottom:4rem; padding-bottom: 0; text-align: center; width: 100%; }
	.ai-decision .ad5 .tab-pic { order: 2; width: 100%; margin-bottom: 4rem; }
	.ai-decision .ad5 .tab-txt .page .group .list ul { order: 3; width: 100%; padding: 0 1.5rem; box-sizing: border-box; }
	.ai-decision .ad5 .tab-txt .page .group .en { font-size: var(--fsM); font-weight: 500; color: #1A1A1A; text-align: center; margin-bottom: 0.4rem; }
	.ai-decision .ad5 .tab-txt .page .group h5.title .ch { font-size: 0; text-align: center; margin-bottom: 0; }
	.ai-decision .ad5 .tab-txt .page .group h5.title .ch span { font-size: var(--fsL); color: var(--pri02); text-align: center; }

	/* ad6 AI 營運閉環 */
	.ai-decision .ad6 li.head{ padding: 0px 0 10px 40px;}
	.ai-decision .ad6 li.head::before{ top: calc(var(--fsP) / 2 + -5px); font-size: 22px;}

	/* ad7 可量化效益 */
	.ai-decision .articalList ul{ width: calc(100% / 2 - 20px)!important; }
	.ad7 .articalList b.l4{ margin: 0; align-items: baseline;}
	.ai-decision .articalList li img{ max-width: 60%;}

	/* ad8 為什麼選擇 WiXtar */
	.ai-decision .listStyle01 ul li:last-child { padding: 0 0 0 30px; }


	/* ============== ai-patrol ============== */
	/* ap2 智慧巡檢架構 */
	.ai-patrol .ap2 .roleList .dialogbox .info li.l3{font-size: var(--fsP);}
	
}