/* 設定CSS變數 */
:root{    
    --pri01:#C89664; /*主色1咖啡淺*/
	--pri02:#5F1E00; /*主色2咖啡深*/
    --pri03:#F1EFE1; /*主色3咖啡-白*/
    --pri04:#FFE8CD; /*主色4咖啡-橙*/
    --pri05:#7D0E14; /*主色5咖啡-紅*/
    --pri06:#8E9497; /*深灰色*/
    --pri07:#CCC; /*淺灰色*/

	--pd:2rem;     /* 通用距離 */
	--pdh:1rem;    /* 通用距離x.5 */
	--pd2:4rem;    /* 通用距離x2 */
	
	--fsXS:1.2rem;    /* 字體大小XS */
	--fsS:1.4rem;   /* 字體大小S */
	--fsP:1.6rem;   /* 字體大小P */
	--fsM:2rem;     /* 字體大小M */
	--fsL:2.6rem;   /* 字體大小L */
	--fsXL:3.6rem;  /* 字體大小XL */
	--fsXL2:4.6rem; /* 字體大小XXL */
	
	--100vh:100vh;
	--maxW:1280px;  /* 最大寬度 */
	--maxW2:1040px;  /* 最大內容寬度 */
	
    --gradient01: linear-gradient(0deg, var(--pri01) 0%, var(--pri02) 50%, var(--pri03) 100%); /* 漸層 */
    
}
/* 專案CSS */
html, body{ font-size: 10px;} /* 1rem */
body *, body *::before, body *::after{ background-position: center; background-repeat: no-repeat;}
body span{display: inline-block; vertical-align: middle;}
.container{ display: block; position: relative; width: 100%; max-width: var(--maxW2); margin: 0 auto; padding: 0 2rem;}
.container.narrow{ max-width: var(--maxW2);}
a{ color: #333; display: inline-block; vertical-align: middle;}
a:hover{ color: var(--pri01);}
.pc{ display: inline-block;}
.mobile{ display: none;}

h1,h2,h3,h4,h5,h6,p{ line-height: 1.2; font-weight: 500;}
h1{font-size: var(--fsXL2); font-weight: 700;}
h2{font-size: var(--fsXL2); font-weight: 700;}
h3{font-size: var(--fsXL); font-weight: 700;}
h4{font-size: var(--fsL);}
h5{font-size: var(--fsM);}
h6{font-size: var(--fsP);}
p {font-size: var(--fsP);}

h3.titleBean{ font-weight: 500; color: var(--pri02); text-align: center; padding: 2rem 0; letter-spacing:.3rem;}
h3.titleBean::before,
h3.titleBean::after{ content: ''; width: 16px; height: 22px; background-image: url(../Images/beans.svg); vertical-align: middle; margin: 0 2.5rem .8rem;}

.screenlock{ font-size: 0; width: 42px; position: fixed; right: 3rem; bottom: 3rem; z-index: 9;}
.screenlock a{ font-size: var(--fsL); width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: center; transition: .5s; }
.screenlock a.UI.share{ width: 42px; height: 42px; border: 2px solid var(--pri02); background-color: rgba(255,255,255,.7); color: var(--pri02); border-radius: 50%; padding-right: 2px; position: static; margin: 0; transition: none;}
.screenlock a.UI.share::before{content: "keyboard_arrow_down"; transition: .3s;}
.screenlock a.social{ margin: -100% 3px; pointer-events: none; opacity: 0; background-size: contain;}
.screenlock a.social.fb{ background-image: url(../Images/icon_fb_over.svg); background-size: 93%; }
.screenlock a.social.ig{ background-image: url(../Images/icon_ig_over.svg); }
.screenlock a.social.line{ background-image: url(../Images/icon_line_over.svg); }
@media screen and (min-width: 801px){
	.screenlock a.UI.share:hover,
	.screenlock:hover a.UI.share{ background-color: var(--pri02); color: #FFF;}
	.screenlock a.UI.share:hover::before,
	.screenlock:hover a.UI.share::before{ transform: rotate(180deg);}
	.screenlock:hover a.social{ margin: 0 3px 10px; pointer-events: auto; opacity: 1;}
	.screenlock:hover a.social:hover{ transform: scale(1.2);}
}

/* a.btn設定 */
a.btn{padding:8px 20px; background-color:var(--pri03); font-size: 18px; letter-spacing: 2px; color:var(--pri02); transition:.5s; border-radius: 50px;}
a.btn.disable{ background-color: var(--pri05); color: #FFF; pointer-events: none;}
a.btn:hover{ background-color:var(--pri01);color: #FFF; }

a.btn.small{ font-size: 14px; padding: 5px 8px;}
a.btn.small::before,
a.btn.small::after{ font-size: 20px; vertical-align: bottom;}
a.btn.Large{ font-size: 26px; padding: 10px 45px; letter-spacing: 5px;}
a.btn.Large::before,
a.btn.Large::after{ font-size: 30px; vertical-align: bottom; margin-right: 5px;}

.btnbox{ display: inline-block; width: 100%; text-align: center;margin-top: 1rem ;}

.btngroup{ display: inline-block; font-size: 0;}
.btngroup a.btn{ border-radius: 0; border-right: 1px solid #FFF; padding: 10px 25px; margin: 0; font-size: 18px;}
.btngroup a.btn:first-child{ border-top-left-radius: 50px; border-bottom-left-radius: 50px; padding-left: 40px; }
.btngroup a.btn:last-child{ border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-right: none; padding-right: 40px;}
.btngroup.Large a.btn{ font-size: 26px; letter-spacing: 5px; padding: 14px 40px; }
.btngroup.Large a.btn:first-child{padding-left: 50px;}
.btngroup.Large a.btn:last-child{padding-right: 50px;}



/* header, footer */
header{position: relative; z-index: 10;}
header .top{background-color: var(--pri01); top: -100px; transition: .5s; width: 100%;}
.scroll header .top{ position: fixed; top: 0; z-index:100;}
/* .scroll header nav{ margin-top:50px;} */
header .logo{ width: 135px; height: 50px; background-image: url(../Images/logo_white.svg); background-size: contain; background-position: left center;}
header nav .container{font-size: 0; display: flex; justify-content: space-between; align-items: center;}
header nav dl{ display: inline-block; padding: 3rem 0; position: relative;}
header nav dt,
header nav dd,
header nav a{ display: inline-block; width: 100%; text-align: center;}
header nav dt a{font-size: var(--fsM); color: var(--pri02);}
header nav dt a::before{ display: none!important;}
header nav dt a span.en{font-size: var(--fsS); color: #ABABAB; display: block; padding-top: .5rem;}
header nav dd{ display: none; position: absolute; top: 85%; left: 50%; transform: translateX(-50%); width: auto; min-width: 140px; background-color: rgba(241,239,225,.9); padding: .5rem 2rem 1rem; border-radius: 10px;}
.index header nav dd{ top: 100%; border-radius: 0 0 10px 10px; border-top: 1px solid var(--pri02);}
header nav dl:hover dd{ display: block;}
header nav dd a{font-size: var(--fsP); color: var(--pri02); white-space: nowrap; padding: .5rem 0;}
header nav dd a[href=""]:hover,
header nav dd a:not([href]):hover{color: var(--pri02);}
header nav dd a:hover{color: var(--pri01);}
header nav dd a.title{cursor: auto;}
header nav dd a.sub {color: #000;;font-weight: 500;font-size: 15px; font-family:"微軟正黑體";}
header nav dd a.sub b.en{ font-family: 'Noto Sans TC';font-weight: 300;padding: 0 0.2rem;}
header nav dd a.sub:hover {color: var(--pri02);}
header nav dd a.sub:nth-of-type(4),
header nav dd a.sub:nth-of-type(8) { padding-bottom:1.5rem; margin-bottom:1rem; border-bottom: 1px solid #CCC;}



footer{ padding: 4rem 0; background-color: var(--pri01); color: #FFF;}
footer .link{ display:flex;justify-content: space-between;align-items: center;}
footer .link1{ font-size: var(--fsP); padding: 0 2rem;display: inline-block;}
footer .link2{ font-size: var(--fsS); text-align: right; padding: 1rem 2rem;display: inline-block;}
footer .rights{ text-align: center; padding-top: 2rem; font-size: var(--fsS); border-top: 1px solid #FFF;}
footer a{ color: #FFF; transition: .3s; margin: 0 .5rem;}
footer a:hover{ color: var(--pri02);}
footer a.social{ width: 20px; height: 20px; background-size: contain;}
footer a.social.fb{ background-image: url(../Images/icon_fb.svg); }
footer a.social.ig{ background-image: url(../Images/icon_ig.svg); }
footer a.social.line{ background-image: url(../Images/icon_line.svg); }
footer a.social.fb:hover{ background-image: url(../Images/icon_fb_over.svg); }
footer a.social.ig:hover{ background-image: url(../Images/icon_ig_over.svg); }
footer a.social.line:hover{ background-image: url(../Images/icon_line_over.svg); }

/* index */
.index .kv{ width: 100%; font-size: 0; background: linear-gradient(160deg, var(--pri03) 0%, var(--pri03) 70%, #FFF 100%); position: relative;}
.index .kv .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none;}
.index .kv .mask{ width: 100%; max-width: 1920px; display: block; margin: 0 auto; overflow: hidden;}
.index .kv .list{ min-width: 100%; white-space: nowrap; display: inline-block;}
.index .kv .list a,
.index .kv .list span{ display: inline-block; width: 100%; height: 417px;}
.index .kv a.UI{font-size: var(--fsXL); color: var(--pri02); transition: .3s; pointer-events: auto;}
.index .kv a.UI:hover{color: var(--pri01); }
.index .kv .pager{ position: absolute; width: 100%; bottom: -2rem; left: 0; text-align: center;}
.index .kv .pager a{ width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; border: 1px solid var(--pri03); margin: 0 3px; transition: .3s; padding: 0;}
.index .kv .pager a:hover{ background-color: var(--pri01);}
.index .kv .pager a.focus{ background-color: var(--pri02);}

.index h3.titleBean{padding: 5rem 0;}

.index .news-list{ display: block; font-size: 0; margin-bottom: 10rem;}
.index .news-list a.item{ display: inline-block; width:calc((100% - 2rem)/ 3);  border-radius: 15px; overflow: hidden; margin-right: 1rem; vertical-align: top;}
.index .news-list a.item:nth-of-type(3n){margin-right: 0;}
.index .news-list a.item.hot{ width: 100%; margin:0 0 5rem 0; display: inline-flex; flex-direction: row; background-color: var(--pri03);}
.index .news-list a.item.hot:nth-of-type(even){flex-direction: row-reverse;}
.index .news-list a.item.hot b.photo,
.index .news-list a.item.hot ul.txt{vertical-align: middle; width: 50%;}
.index .news-list a.item.hot ul.txt{display: inline-flex; align-items: center; flex-direction: column; justify-content: center;}
.index .news-list a.item b.photo{ display: inline-block; width: 100%; border-radius: 15px; margin-bottom: 2rem; transition: .3s; background-size: 100% auto;}
.index .news-list a.item b.photo::after{ content: ''; display: block; padding-top: 52.26%;}
.index .news-list a.item.hot b.photo{ margin-bottom: 0; border-radius: 0;}
.index .news-list a.item:hover b.photo{ background-size: 115% auto;}

.index .news-list a.item ul.txt li{width: 100%; font-size: var(--fsM); color: var(--pri02); text-align: center; margin-bottom: 1rem;}
.index .news-list a.item ul.txt li:empty{ display: none;}
.index .news-list a.item ul.txt li.t3{font-size: var(--fsS); color: var(--pri05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.index .news-list a.item.hot ul.txt li{ width: calc(100% - 10rem); text-align: left;}
.index .news-list a.item.hot ul.txt li.t1{font-size: var(--fsS); color: var(--pri05);}
.index .news-list a.item.hot ul.txt li.t2{font-size: var(--fsL); border-bottom: 1px solid var(--pri02); padding-bottom: 1rem; margin-bottom: 2rem;}
.index .news-list a.item.hot ul.txt li.t3{font-size: var(--fsP); color: var(--pri02);}
.index .news-list a.item.hot ul.txt li.t4{font-size: var(--fsS); text-align: right; margin-bottom: 0;}



/* ---------------  最新消息 /news 共用  --------------- */
.mainNaviBar {font-size:var(--fsS); color: var(--pri02); width: 100%; padding:3rem 0 5rem 0; }
.mainNaviBar a{ padding: 0 1rem; color: var(--pri02); }
.mainNaviBar a:first-child{ padding: 0 1rem 0 0; }
.mainNaviBar a:hover,
.mainNaviBar a.focus{color: var(--pri05);}

.back{ font-weight: 500; text-align: right; padding : 5rem 0;}
.back a{ font-size: var(--fsS); color: var(--pri02); display: inline-block;}
.back a::after{ content: ""; width: 43px; height: 8px; margin-left: 1rem; background-image: url(../Images/ui/longarrow.svg); }

.pager{text-align: right; padding: 5rem 0;}
.pager a { display:inline-block; width:42px; height:42px; margin-right: 0.5rem; border:solid 1px var(--pri07); font-size:var(--fsS); border-radius: 5px; transition:.5s;display: inline-flex;justify-content: center;align-items: center;} 
.pager a:hover,
.pager a.focus{ color: #fff; background-color:var(--pri06)}
.pager a:last-child{margin-right: 0;}



/* 活動資訊 /default */
/* 列表 */
.news .common-list{ display: block; font-size: 0; }/* margin-bottom: 10rem; */
.news .common-list a.item{ display: inline-block; width:calc((100% - 2rem)/ 3);  border-radius: 15px; overflow: hidden; margin-right: 1rem; vertical-align: top; margin-bottom: 6rem;}
.news .common-list a.item:nth-of-type(3n){margin-right: 0;}
.news .common-list a.item b.photo{ display: inline-block; width: 100%; border-radius: 15px; margin-bottom: 2rem; transition: .3s; background-size: 100% auto;}
.news .common-list a.item b.photo::after{ content: ''; display: block; padding-top: 52.26%;}
.news .common-list a.item.hot b.photo{ margin-bottom: 0; border-radius: 0;}
.news .common-list a.item:hover b.photo{ background-size: 115% auto;}

.news .common-list a.item ul.txt li{ font-size: var(--fsM); font-weight: 500; color: var(--pri02); width: 100%; text-align: center; margin-bottom: 1rem;}
.news .common-list a.item ul.txt li.t3{font-size: var(--fsS); color: var(--pri05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 内頁 */
.htmlEditor{font-size: 1.5rem; margin-bottom: 5rem;}

.news .txt-banner { color:var(--pri02); display: flex; justify-content: space-between; font-size: 0; padding-bottom: 5rem; margin-bottom: 5rem; border-bottom: 1px solid #CCC; }
.news .txt-banner h4 { font-weight: 500; line-height: 1.5; position: relative; margin-bottom: 2rem;}
.news .txt-banner ul { width: calc(100% - 450px); display: flex; flex-direction: column;justify-content: center; font-size: var(--fsS); padding: 2rem 5rem 2rem 0 ; letter-spacing: 1px; line-height: 1.5;}
.news .txt-banner li { font-size: var(--fsP); font-weight: 500;}

.news .txt-banner .photo { width:560px; background-size: cover; display: block; border-radius: 15px;}
.news .txt-banner .photo::after{ content:""; display: block; padding-top:52.32%;}

.news ul {margin-bottom: 1rem; font-size: var(--fsP);font-weight: 700;}
.news ul .b1 {padding:0.5rem 0; }
.news ul .b1 a{color:var(--pri02);}
.news ul .b1 a:hover {color:var(--pri01);}
.news ul.linkpic {margin-bottom: 4.5rem;}



/* 伯朗公告 /placard */
/* 列表 */
.news a.listTitle{text-align:left; padding:0 0 3rem 0; margin-bottom:3rem; display:block;color:var(--pri02); border-bottom:solid 1px var(--pri07); overflow:hidden; position:relative;}
.news a.listTitle::after{content:""; width:100%; display:block; position:absolute; bottom:0px; height:1px; background-color:var(--pri05); left:-200%; transition: 1.5s;}

.news a.listTitle b{display:block; width:100%; padding-left:2rem;}
.news a.listTitle b.title{ font-size:var(--fsM); font-weight: 500; color:var(--pri02);}
.news a.listTitle b.title::before{content:"•"; display:inline-block; margin-right: 0.5rem;}
.news a.listTitle b.word{ font-size:var(--fsP); color:var(--pri05);font-weight: 500; padding-left: var(--fsXL); padding-top: 1rem; width:100%; transition: .5s;}

/* .news a.listTitle:hover b.word,
.news a.listTitle:hover::before{color:var(--pri05);} */
.news a.listTitle:hover::after{left:0;}


/* 内頁 */
h4.title {font-size: var(--fsL); font-weight: 500; color: var(--pri02); text-align: left; margin-bottom: 3rem;}

.newspic { display:inline-block; text-align: center;font-size: 0; }
.newspic img {display: inline-block; padding: 3rem; width: calc(100%/2);}

.newslink {font-size: 0;}
.newslink .item {display: inline-block; padding: 5rem; width: calc(100%/3);}
.newslink b.photo{display: inline-block; width: 100%; padding-top: 66.66%; background-size: contain; }
.newslink::before { content: ""; display: block; border-bottom: 1px solid var(--pri07); }



/* 左選單 共用 */
.leftMenu {width: 300px; padding-right: 8rem; display: inline-block;vertical-align:top;}

.leftMenu dt { position: relative; margin-bottom: 0.5rem ; padding: 13px 10px; line-height: 1; font-size: var(--fsP); color: var(--pri02) ;text-align: center; background-color: #fff; border: 2px solid var(--pri01); border-radius: 50px;  }
.leftMenu dd { font-size: var(--fsP); text-align: center; border: 2px solid var(--pri01); border-radius: 20px; margin-bottom: 0.5rem; }
.leftMenu a{ display: block; font-size: var(--fsS); padding: 5px 0 ; color: var(--pri02);}
.leftMenu dt a { font-size: var(--fsP); padding: 0 ; color: inherit;}
.leftMenu dd a { border-radius: 25px; padding: 5px 0; margin: 5px; }

.leftMenu dt.on { background-color: var(--pri01); border: 2px solid var(--pri01);color: #fff;}
.leftMenu dt.on a{ color: #fff ;}

/* .leftMenu dt.on::before {content: "";display: inline-block; width: 6px; height: 6px; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);background-color:var(--pri02);border-radius: 50%; vertical-align: middle;} */
/* .leftMenu dt.on::before {content: "";display: inline-block; background-image: url(../Images/cup_white.svg); width: 14.43px; height: 12px;background-size:100%; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);vertical-align: middle;} */
.leftMenu dd {display: none;}
.leftMenu dt.on+dd {display: block;}
.leftMenu dd a.focus,
.leftMenu dd a:hover { background-color: var(--pri02); color: #fff;}
.leftMenu dt.focus,
.leftMenu dt:hover{ background-color: var(--pri01); border: 2px solid var(--pri01); color: #fff;}

.leftMenu .UI.tune::before{ font-size: var(--fsM); line-height: 0.8; width: auto; height: auto;background: transparent; position: absolute; color:var(--pri02); left:40px; color: inherit; }
.leftMenu dt.on.UI.tune::before {content: "tune";}

.leftMenu .searchBox{ width: 100%;display: inline-flex; align-items: center; vertical-align: middle; position: relative;}
.leftMenu .searchBox input{ width: 100%;background-color: #F2F2F2; border: 0px ; border-radius: 50px; padding: 10px; color: #000;text-align: center;}
.leftMenu .searchBox input::placeholder{ color: var(--pri07); font-size: var(--fsP);}
.leftMenu .searchBox .UI.search{font-size: var(--fsM);line-height: 1; position: absolute; color:var(--pri06); right: 20px;}

/* .l1 .leftMenu dt.a1::before,
.l2 .leftMenu dt.a2::before,
.l3 .leftMenu dt.a3::before,
.l4 .leftMenu dt.a4::before {content: "";display: inline-block; background-image: url(../Images/cup_white.svg); width: 14.43px; height: 12px;background-size:100%; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);vertical-align: middle;} */
.l1 .leftMenu dt.a1,
.l2 .leftMenu dt.a2,
.l3 .leftMenu dt.a3,
.l4 .leftMenu dt.a4,
.member .leftMenu dl.menu_member dt,
.qa .leftMenu dl.menu_qa dt{background-color: var(--pri01); color: #fff; }


.leftMenu .submenuList {display: none; overflow: hidden; }
.leftMenu .submenu.active + .submenuList { display: block; }
.leftMenu .submenuList a { padding: 5px 3rem; color: var(--pri02); display: block;}
.submenuList a.focus { background-color: var(--pri03);}

.leftMenu .submenu{border-radius: 15px 15px 0 0 ; margin: 5px 5px 0 5px;}
.leftMenu dd a.submenu {display: block;position: relative;margin: 5px 5px 0 5px; border-radius: 15px 15px 0 0;background-color: var(--pri03); padding-bottom: 8px;border-bottom: 1px dotted #CCC;}
.leftMenu dd a.submenu:hover{color:var(--pri02)}
.leftMenu dd a.submenu.focus {color: var(--pri02); }/* background-color: var(--pri03); padding-bottom: 8px;border-bottom: 1px dotted #CCC; */
/* .leftMenu dd a.submenu.focus:hover{ background-color: var(--pri01);color: #fff;} */

.leftMenu .submenuList a:hover,
.leftMenu .submenuList a.focus{ background-color: var(--pri01);color: #fff;}

.leftMenu .submenuList{ display: block;background-color: var(--pri03);margin: 0 5px 5px 5px; border-radius: 0 0 15px 15px; }
.leftMenu .submenuList dd a { border-radius: 20px; padding: 5px 0 0 0; margin: 0 5px 5px 5px;}


/* 特定頁面展開左側 leftMenu 設定 */
/* .member .leftMenu dl.menu_member dt::before,
.count .leftMenu dl.menu_lounge dt::before,
.lounge .leftMenu dl.menu_lounge dt::before,
.qa .leftMenu dl.menu_qa dt::before {content: "";display: inline-block; width: 6px; height: 6px; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);background-color:var(--pri02);border-radius: 50%; vertical-align: middle;}
.member .leftMenu dl.menu_member dt+dd,
.count .leftMenu dl.menu_lounge dt+dd,
.lounge .leftMenu dl.menu_lounge dt+dd{display: block;} */

/* --------------- 飲品輕食 /CafeStore & 商品區 /Stores 共用 --------------- */
/* 列表 */
h4.titleBean{ display: flex; align-items: baseline; font-weight: 700; color: var(--pri02); text-align: center; padding-bottom: 3rem; letter-spacing:0.1rem; text-align: left;}
h4.titleBean::before{ content: ''; width: 21px; height: 21px; background-image: url(../Images/ui/rec.png);background-size: contain; vertical-align: middle; margin: 1rem 2.5rem 0 0;}
h4.titleBean span{margin-left: 1rem; font-size: var(--fsM); vertical-align: bottom; letter-spacing:0rem;}

h4.titleicon{ display: flex;align-items: center;font-weight: 700; color: var(--pri02); text-align: center; padding-bottom: 3rem; letter-spacing:0.1rem; text-align: left;}
h4.titleicon span{margin-left: 1rem; font-size: var(--fsM); vertical-align: bottom; letter-spacing:0rem;}
h4.titleicon i.icon{ width: 23px; height: 23px; font-size: var(--fsL); background-size: contain; margin-right: 2rem;}
/* .conceptstore h4.titleBean::before{ content: 'restaurant';}
.cafestore h4.titleBean::before{ content: 'restaurant';}
.products h4.titleBean::before{ content: 'redeem';}
.member h4.titleBean::before,
.count h4.titleBean::before,
.lounge h4.titleBean::before,
.qa h4.titleBean::before{ content:'payment';} 
.shopping h4.titleBean::before{ content: 'shopping_cart';} 
h4.titleBean::before{display: inline-block;transform: translateY(4px); vertical-align: baseline; background-image: none; vertical-align: middle; margin: 0 2.5rem 1rem 0;}*/

.products-list {display: inline-block;width: calc(100% - 300px);vertical-align: top;}
.products-list .item { vertical-align: top; display: inline-block; position: relative; width: calc((100% - 2rem - 2rem)/3); margin-right: 2rem; text-align:center; margin-bottom: 5rem;}
.products-list .item:nth-of-type(3n) { margin-right: 0; }

.products-list .item.new::after{ content: 'NEW';position:absolute; color: #ffffff;font-size: var(--fsS); font-weight: 500; display: flex; justify-content: center; align-items: center; width: 40px;height: 40px;border-radius: 50%; top:2rem;right: 2rem; background-color:#FFA20C; }
.products-list .item b.photo{display: inline-block; width: 100%; padding-top: 100%; background-size: contain;transition: .3s;}
.products-list .item:hover b.photo { transform: scale(1.2);}
.products-list i.name {font-size: var(--fsP); font-style: normal; letter-spacing: 1px;color:var(--pri02);}
.products-list i.name span {display: block; font-size: var(--fsS); letter-spacing: 0; }

.products .products-list .item b.photo{display: inline-block; width: 100%; padding-top: 100%; background-size: contain;margin-bottom: 2rem;}


/* 内頁 */
.middleBox {font-size: 0;width: 100%; display:inline-block; vertical-align:top;}
.product {display: inline-block; width: calc(100% - 300px);vertical-align: top;}
.product .category{font-size:22px; font-weight: 700; color:var(--pri02); margin-bottom: 2rem; }
.product .item{display: inline-block; width: 100%; border-bottom:solid 1px var(--pri07); margin-bottom: 3rem; padding-bottom:3rem;  }
.product .pic{ display: inline-block; width:350px; height:350px; position:relative; border:solid 1px var(--pri07);background-size: contain; border-radius: 20px; margin-right: 5rem;}
.product .item.new .pic::after{ content: 'NEW';font-weight: 500; display: flex; justify-content: center; align-items: center; line-height: 1;  width: 50px;height: 50px; position:absolute; background-color:#FFA20C; color: #ffffff; border-radius: 50%;top:10px;right: 10px;}
.product ul{ display: inline-block;vertical-align: top;}
.product li{ font-size:var(--fsP); font-weight: 300; margin-bottom: 0.5rem; width:300px;}
.product .title { font-size:var(--fsM); font-weight: 500; color:var(--pri02);}
.product .eng { font-size: var(--fsS); font-family: 'Apercu'; color:var(--pri02);}
.product .titleS { font-size: var(--fsS); font-weight: 300; color:var(--pri05);}



/* --------------- 門市資訊 /Stores --------------- */
/* 主頁 */
.stores .information ul.txtbg{ background-color:var(--pri01);padding: 3rem;text-align: center;border-radius: 20px;}
.stores .information .txtbg li{ margin-bottom: 0;color:#FFF; font-size: var(--fsM); font-weight: 300; line-height: 2;letter-spacing: 1px;}

/* 内頁 */
.information{ display: inline-block;width: calc(100% - 300px);vertical-align: top; }

.banner{margin-bottom: 3rem;}
.banner .mask {margin: 0 auto; overflow:hidden; border-radius: 20px; }
.banner .list {white-space:nowrap; width: 100%; }
.banner .list .item { width: 100%; height: auto; padding-top: 66%;background-size: cover; display: inline-block; }

.carousel {position: relative; width: 100%; max-width: 1000px;}
.carousel .pager{position: absolute; left: 0 ;bottom: -3rem; width: 100%; text-align: center;}
.carousel .pager a{background-color: #EFEFEF; border:solid 0px ; display: inline-block; vertical-align: middle; width: 12px; height: 12px; border-radius: 50%; margin: 0.5rem; transition: .3s;}
.carousel .pager a.focus{background: var(--pri03); border-radius: 10px; width: 24px;}
.carousel .pager a:hover{background-color: var(--pri01); box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.3);}

.stores .information{width:calc(100% - 300px); }
.stores .information h3{ font-weight: 500; color :var(--pri02); margin-bottom: 3rem;}
.stores .information ul{ display: block; margin-bottom: 3rem; color:var(--pri02);}
.stores .information li{ display: block; font-size: var(--fsM); margin-bottom: 3rem;}
.stores .information b{ display: block; font-size: var(--fsP);font-weight: 500;margin-bottom: 3rem; vertical-align: top;}
.stores .information b.UI.time span {display: inline-block;vertical-align: top;line-height: 1.5;}
.stores .information ul span{color:#000000; margin-bottom: 0rem;}
.stores .information li.group b { display: inline-block; margin-bottom: 0rem; margin-right: 4rem;}
.stores .information li.group .btn b { margin-right: 0rem;}
.stores .information a.btn { font-size:var(--fsP); color :var(--pri02); background:var(--pri03); padding:0.8rem 2rem; margin-right: 1rem; border-radius: 30px; transition: .3s; }
.stores .information a.btn:hover {background: var(--pri01);color: #fff;}
.stores .information p{color:var(--pri02); padding-left: var(--fsXL);line-height: 1.5; margin-bottom: 3rem;}

.stores .information .txt li:first-child{ margin-bottom: 2rem;}
.stores .information .txt b{margin-bottom: 1.5rem; }
.stores .information .txt p{color:#000000; }
.stores .information .UI::before {font-size: var(--fsM); padding-right: .5rem; vertical-align: top; line-height: calc(var(--fsP)*1.5);}

.stores .information .map{ padding-left: var(--fsXL);margin-bottom: 3rem;}
.stores .information .map img { width:100%; border-radius:20px;}

.stores .storesicon{ margin-bottom: 3rem; padding-left: var(--fsXL);}
.stores .storesicon img{width: 50px; margin-right: 1rem;}

/* search */
.search .txt-banner { color:var(--pri02); display: flex; justify-content: space-between; align-items: center; padding-bottom: 4rem; margin-bottom: 5rem; border-bottom: 1px solid #CCC; }
.search .information h4.title{ font-size: 23px; } 
.search .txt-banner h4 { font-weight: 500; line-height: 1.5; position: relative; margin-bottom: 1rem;}
.search .txt-banner ul { width: calc(100% - 250px);  display: flex; flex-direction: column;justify-content: space-evenly; font-size: var(--fsS); padding-left: 3.5rem ; letter-spacing: 1px; line-height: 1.5;}

.search .txt-banner .photo { width:250px; background-size: cover; background-position: center; display: block; border-radius: 20px; }
.search .txt-banner .photo::after{ content:""; display: block; padding-top: 66%;}
.search .information ul { margin-bottom: 0rem;}
.search .information ul span{display: inline; vertical-align: baseline; }
.search .information b { margin-bottom: 1rem; white-space: nowrap; }
.search .information li:last-child { margin-bottom: 0rem;}

.search .information b.UI.locate span {display: inline-block; vertical-align: baseline;}
.search .information b.UI.time span {display: inline-block; vertical-align: baseline;}


/* --------------- 線上購物 /Shopping --------------- */
.shopping .products-list {font-size: 0; width: 100%;display: flex;justify-content: space-between;align-items: center}
.shopping .products-list .item { display: inline-block; width: calc((100% - 2rem)/2); }
.shopping .products-list .item:nth-of-type(1n) { margin-right: 2rem; margin-bottom: 0;}
.shopping .products-list .item:nth-of-type(2n) { margin-right: 0; margin-bottom: 0;}

.shopping b.photo{display: inline-block; border-radius: 20px; width: 50%; padding-top: 30%; background-size: cover;margin: 0 ;}
.shopping .products-list .right { text-align: center; width: 48%;}
.shopping .products-list .right .title { font-size: 30px; text-align: center; margin-bottom: 1.5rem;display: block;}


/* --------------- 關於伯朗 /About --------------- */
.about .product .category{font-weight: 500;margin-bottom: 5rem;display: block; }
.about .product .category span{margin-bottom: 2rem;display: block; }
.about .product .category li{ color: #000;}
.about .product .item{display: inline-block; width: 100%; border-bottom:solid 0px; padding-bottom: 0rem;margin-bottom: 3rem;}
.about .product li{ width: 100%;}
.about .product .title { margin-bottom: 1rem;}
.about .product .title::before { content: "◆";padding: 0 0.8rem 0 0.5rem;}
.about .product .intro { border-bottom: 1px solid #CCC; margin-bottom:3rem; padding: 0  1rem 3rem 3.5rem;}
.about .product .intro b {margin-left: -23px;margin-right: 8px;}

.about.l4 .product .category{margin-bottom: 0rem; }
.about.l4 .product .category span{margin-bottom: 1.5rem;display: block; }
.about.l4 .product .title { margin-bottom: 2rem;}
.about.l4 .product .item{margin-bottom: 2rem;}
.about.l4 .product .intro { margin-bottom:2rem;  border-bottom: 0px;padding: 0; }
.about.l4 .product img {width:100%;margin-bottom: 2rem; }
.about.l4 .titlesub{font-size: var(--fsM); font-weight: 700;color:var(--pri02);}
.about.l4 .btnRight {text-align: center;}
.about.l4 .btnRight span{ font-size: var(--fsP);line-height: 2;}
.about.l4 .product { margin-bottom: 3rem;}

br.w640 { display: none; }

/* --------------- 伯朗會員 /Member --------------- */
lightbox .lightbox-window.member h5.title { font-size: var(--fsM); font-weight: 500; color: var(--pri02); text-align: center; margin: 3rem 0 4rem;line-height: 1.5;}
lightbox .lightbox-window.member ul.title li{ font-weight: 700; padding: 0 10rem; }
lightbox .lightbox-window.member li{ text-align: left; font-size: var(--fsP); padding: 2rem 10rem ; line-height: 2;}
lightbox .lightbox-window.member a.btn {width:150px;}

/* 會員專區 */
input::placeholder{ color: var(--pri07);}
.tablebox input:focus, button:focus, select:focus {border-color: var(--pri06);}

.dataBox {display: inline-block;width:100%; padding: 2rem 3rem;vertical-align: top;border: 1px solid var(--pri07);border-radius: 15px;} 
.member .dataBox {display: inline-block;width:100%;margin-bottom: 5rem; padding: 2rem 3rem;vertical-align: top;border: 1px solid var(--pri07);border-radius: 15px;} 
.member .tablebox span {font-size: var(--fsP);text-align: left;padding: 1rem;}

.tablebox{ display: table; width: 100%; margin: 0 auto;}
.tablebox p {width:100%;}
.tablebox ul li { vertical-align: middle; font-size: var(--fsP); padding: 1rem; margin-right:1rem; display: inline-flex;padding: 1rem 1rem; vertical-align: baseline;}
.tablebox> ul > li:nth-of-type(1) {width: 16%;}
.tablebox.password ul li:nth-of-type(1) {width: 21%;}
.tablebox input { padding: 10px 15px; border: 1px solid #ccc; border-radius: 30px; font-size: var(--fsP);}
.tablebox ul.vericode input{ width: 40%;}
.tablebox img {margin: 1rem; width: 100px; height: 36px; vertical-align: middle;}
.tablebox textarea { width: 100%; height: 200px; padding: 10px 15px; border: 1px solid #ccc; border-radius: 30px; font-size: var(--fsP); resize: none;}

.btnbox a {display: inline-block; width: auto; min-width: 110px; padding: 1rem 2rem; white-space: nowrap; text-align: center; margin-left: 1rem ; font-size: var(--fsP); background-color:var(--pri03);color: var(--pri02); border-radius: 30px; transition:.3s; }
.btnbox a:nth-of-type(1) { margin-left: 0; }
.btnbox a:hover {background-color:var(--pri01); color: #fff;}
.btnbox.right { text-align: right;}

.btn{ text-align: center;}
.btn li a{color:var(--pri02);}
.btn li{font-size: var(--fsS);background-color: transparent; color:var(--pri02); display: inline-block; text-align: center;}
.btn li span{font-size: var(--fsS);padding: 1rem;}
.btn li a:hover {background-color:transparent; color:var(--pri01);}

/* 加入會員 */
.memberbox{ width:100%; height:450px; padding:3rem; color:#000; text-align:left;border: 1px solid var(--pri07); background:#fff;border-radius: 15px; overflow:auto; }
.memberbox dt{ font-size:var(--fsM);line-height:30px; color:var(--pri02); text-align:left;}
.memberbox dt b{ font-weight:700;}
.memberbox dd{ font-size:var(--fsP);padding:10px 0 30px 0; color:#000; text-align:left; }
.memberbox b{ font-weight: 500; }
.memberbox dd span{ font-weight:700;}

.memberbox h5{ font-size:var(--fsL);font-weight:700; width:100%;text-align:center;margin-bottom:1rem;}
.memberbox li{margin-bottom:1rem;}
.memberbox li b{margin-bottom:1rem;}

/* 表格 */
.formtable .inputtxt1{ width:40%; }
.formtable .inputtxt2{ width:20%;}
.formtable .inputtxtli3{ width:100%; margin-top: 1rem;}
.formtable .inputtxtcheck{ width:21%; background-color: #F2F2F2;padding:2px;margin-top: 0.2rem;}

.formtable input[type=radio]+Label {width: 11%;display: inline;background-color:transparent;border: 0px;padding:5px 0.5rem;}
.formtable input[type=radio]+Label::before{margin-right: 0.5rem;}
.formtable span{ font-size: var(--fsP);}
.formtable input[type=checkbox]+Label{width: 30%; white-space: nowrap; background-color:transparent;border: 0px;padding:5px 0.5rem;}
.formtable input[type=checkbox]+Label::before{margin-right: 0.5rem;}
.formtable select {width:30%;background-position: right;text-align: left; padding: 10px 15px; border: 1px solid #ccc; border-radius: 30px;}
.red { margin-top: 0.5rem;}
.red span{ color:rgb(255, 57, 57);font-size: var(--fsS); }
.formtable .vericode span {font-size: var(--fsS); }
.formtable .tablebox li.inputradio{vertical-align: middle;}


/* --------------- 二代卡專區 /Count --------------- */
/* 共用 */

h5.title {font-weight: 500; color: var(--pri02); text-align: left; margin-bottom: 2rem;;}
h5.title span{ font-size: var(--fsP);}

.count .information{ margin-bottom: 3rem; }

.count input[type=checkbox]+Label{width: 100%;}

.count ul.titledetail li,
.lightbox-window .formtable.c4 .titledetail li{font-size: var(--fsS);}

.count .dataBox{padding: 0rem 3rem 1rem 3rem;}
.count .dataBox.c1{ padding: 2rem 3rem;}

.count .tablebox ul li:nth-of-type(1) {width: 20%;}
.count .tablebox ul li .selectcard { width: 100%; border-radius: 5px; background-color: #c89665; padding-top: 64.51%; background-size: auto 100%; background-position: center; transition: .3s;}
.count .tablebox ul li .selectcard:hover { background-size: auto 105%;}

.formtable.c1 li,
.formtable.c2 li,
.formtable.c2a li,
.formtable.c3 li,
.formtable.c4 li,
.lightbox-window .formtable.c4 li{text-align: center;border-bottom: dotted 1px #CCC;vertical-align: middle;}

.formtable.c1 li.photo,
.formtable.c2 li.photo,
.formtable.c3 li.photo,
.lightbox-window .formtable.c4 li.photo{width: 155px;height: 155px; background-size: 120%;}

/* 二代卡專區 note */
.count .product .category { margin-bottom: 3rem;}
.count .product .title::before { content: "◆";padding: 0 1rem;}
.count .product .item{ border-bottom:solid 0px;}
.count .product ul{ margin-bottom:3rem; border-bottom: solid 1px #CCC; width: 100%;}
.count .product li{ width: 100%;}
.count .product .intro { margin-bottom:3rem; border-bottom: 0px;font-weight: 500;padding: 0 var(--fsL) 0 4rem;}
.count .product .intro.sub {padding: 0 ; line-height: 2;}

.count .titlesub{font-size: var(--fsM); font-weight: 500;margin-bottom: 1rem; color:var(--pri02);}

.count .btn.left{ text-align: left; margin: 2rem 0 1rem 0;}
.count .btn li.intro{ display: inline; text-align: center; padding-left: 1rem;color: #000; vertical-align: middle;}


/* Lounge卡記名 provison/index */
.dataBox.c1,
.dataBox.c2 {margin-bottom: 3rem;}
.formtable.c1 li{ text-align: center;}
.formtable.c1 li:nth-child(1){width:25%; background-size: 120%;}

/* Lounge卡交易明細查詢 inquiry */
.formtable.c2 ul.title,
.formtable.c2a ul.title,
.formtable.c3 ul.title,
.formtable.c4 ul.title{ font-weight: 700; letter-spacing: 0.5px;}

.formtable.c2 li a{color: var(--pri02);}
.formtable.c2 li a:hover{color: var(--pri01);}

.formtable.c2 li:nth-child(1){ width:15%; background-size: 120%;}
.formtable.c2 li:nth-child(2){ min-width: 150px;}
.formtable.c2 li:nth-child(3){ width:auto;}
.formtable.c2 li:nth-child(4){ width:auto;}
.formtable.c2 li:nth-child(5){ width:auto;}
.formtable.c2 li:nth-child(6){ width:20%;}

.formtable.c2a li:nth-child(1){ width:15%;}
.formtable.c2a li:nth-child(2){ width:auto; min-width: 150px;}
.formtable.c2a li:nth-child(3){ width:auto;}
.formtable.c2a li:nth-child(4){ width:auto;}
.formtable.c2a li:nth-child(5){ width:auto;}
.formtable.c2a li:nth-child(6){ width:15%;}


/* Lounge卡取消記名 indexCancel */
.formtable.c3 li:nth-child(1){ width:auto;}
.formtable.c3 li:nth-child(2){ width:20%; background-size: 120%;}
.formtable.c3 li:nth-child(3){ min-width: 200px;}
.formtable.c3 li:nth-child(4){ width:20%;}
.formtable.c3 li:nth-child(5){ width:20%;}
.formtable.c3 li:nth-child(6){ width:15%;}

/* Lounge卡餘額點數轉置 transpose */
/* .count .dataBox{margin-bottom: 0;} */
.formtable.c4 li:nth-child(1){ width:auto; min-width: 150px;}
.formtable.c4 li:nth-child(2){ width:250px; text-align: center;}
.formtable.c4 li:nth-child(3){ width:auto;text-align: center;}
.formtable.c4 li:nth-child(4){ width:250px; text-align: center;}
.formtable.c4 .inputtxt1{ text-align: center;}

li .red { color:var(--pri05);text-align: left; margin-top: 0;} 


lightbox { display: none; position: fixed; width: 100%; height: 100vh; top: 0; left:0; z-index: -1; justify-content: center; align-items: center;}
lightbox b.lightbox-bg{ display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
lightbox .lightbox-window{ display: inline-block; position: relative; width: 90%; min-width: 500px; max-width: var(--maxW); max-height: 90vh; padding: 30px; text-align: center; z-index: 1; background-color: #FFF; border-radius: 25px;}
lightbox .lightbox-window .container{ padding: 0; overflow: hidden;}
lightbox .lightbox-window .red{ color:var(--pri05);}
lightbox a{ color: var(--pri01); transition: .3s;}
lightbox a:hover{ color: var(--pri02);}
lightbox a.close{ width: 40px; height: 40px; font-size: 0; border-radius: 50%; color: #FFF; background-color: var(--pri01); position: absolute; top: -15px; right: -15px; font-weight: 300; z-index: 10; cursor: pointer; pointer-events: auto; transition: .3s; pointer-events: auto;}
lightbox a.close::before{ font-size: 25px; line-height: 40px;}
lightbox a.close:hover{ background-color: var(--pri05);}
lightbox.show{ z-index: 999; display: flex; }

lightbox .btnbox{margin-top: 2rem;}

lightbox .lightbox-window .movie{ width: 100%; z-index: 9; pointer-events: auto; position: relative;}
lightbox .lightbox-window .movie::after{ content: ''; display: block; padding-top: 56.25%;}
lightbox .lightbox-window .movie iframe{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

lightbox .lightbox-window.vertical-movie{ width: auto;}
lightbox .lightbox-window.vertical-movie .movie{ width: 40%; min-width: 500px;}
lightbox .lightbox-window.vertical-movie .movie::after{padding-top: 177.778%;}

lightbox .lightbox-window .dataBox {margin-bottom: 1.5rem; padding: 0 3rem 1rem 3rem;} 

/* --------------- Lounge卡專區 /Lounge --------------- */
.lounge .product li { width: 100%;}

/* Lounge卡藝廊 index */
/* .lounge .products-list .item {vertical-align: top; text-align: center; display: inline-block; width: calc((100% - 2rem) /3);margin-right: 2rem;margin-bottom: 5rem; position: relative; } */
.lounge .products-list .item b.photo{display: inline-block; width: 100%; padding-top: 100%; background-size: 130%; transition: .3s;}
.lounge .products-list i.name {padding-bottom: 2rem;display: inline-block;}
.lounge .products-list i.name span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;	width: 200px; display: inline-block; color: var(--pri01);letter-spacing: 1px;}
.lounge .products-list .item:nth-of-type(3n){margin-right: 0;}
.lounge .products-list .item:hover b.photo { transform: scale(1);}

.lounge .btn{margin: 0 auto; display:block; padding:8px 20px; background-color:var(--pri03); font-size: var(--fsS); letter-spacing: 2px; color:var(--pri02); transition:.5s; border-radius: 50px;align-items: center;}
.lounge .btn:hover{ background-color:var(--pri01);color: #FFF; }

.lounge .products-list .item .btn { margin: 0 auto; display: block; padding: 8px 20px; background-color: var(--pri03); font-size:var(--fsXS);  letter-spacing: 2px; color: var(--pri02);transition: .3s;border-radius: 50px; opacity: 0; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);transform: translate(-50%);}
.lounge .products-list .item:hover .btn { opacity: 1;}


/* 禮物兌換 count */
.lounge.pre .products-list .item {margin-bottom: 10rem;}
.lounge.pre .products-list .item b.photo{background-size: contain; }

/* 内頁共用 */
.loungedetail .product {display: inline-block; width: calc(100% - 300px);vertical-align: top;}
.loungedetail .product .category{font-size:var(--fsL);font-weight: 700; color:var(--pri02); margin-bottom: 2rem;}
.loungedetail .product .item{display: inline-block; width: 100%; border-bottom:solid 1px var(--pri07); margin-bottom: 3rem; padding-bottom:3rem;}
.loungedetail .product .pic{ display: inline-block; width:350px; height:350px; position:relative; border:solid 1px var(--pri07);background-size: 150%; border-radius: 20px; margin-right: 5rem;}
.loungedetail .product .item.new .pic::after{ content: 'NEW';font-weight: 500; display: flex; justify-content: center; align-items: center; line-height: 1;  width: 50px;height: 50px; position:absolute; background-color:#FFA20C; color: #ffffff; border-radius: 50%;top:10px;right: 10px;}
.loungedetail .product ul{ display: inline-block; vertical-align: top;}
.loungedetail .product li { margin-bottom: 0; }
.countdetail .product li.intro,
.loungedetail .product li.intro{ font-size:var(--fsP); font-weight: 500; margin-bottom: 2rem; width:300px; color: var(--pri01);}

.loungedetail .product .title { font-size:var(--fsM); font-weight: 700; color:var(--pri02);}
.loungedetail .product .eng { font-size: var(--fsS); font-family: 'Apercu'; color:var(--pri02);}
.loungedetail .product .titleS { font-size: var(--fsS); font-weight: 300; color:var(--pri05);}

.countdetail .product .pic{ background-size: contain; }
.countdetail .product li.intro2{margin-bottom: 0;}

/* 使用説明 use */
.lounge .product .category{margin-bottom: 3rem;}
.lounge .product .category span{margin-bottom: 2rem;display: block; }
.lounge .product .category li{ color: #000;}
.lounge .product .item{display: inline-block; width: 100%; border-bottom:solid 0px; padding-bottom: 0rem;margin-bottom: 3rem;}
.lounge .product .title { margin-bottom: 1rem; position: relative;}
.lounge .product .intro { border-bottom: 1px solid #CCC; margin-bottom:3rem; padding: 0 var(--fsXS) 3rem var(--fsXL2);font-weight: 500;}
.lounge .product .intro b {margin-left: -15px;}

.lounge .dataBox{ padding: 0;}
.lounge .formtable.c5 li:nth-child(1){ width:50%; text-align: center;}
.lounge .formtable.c5 li:nth-child(2){ text-align: center;}
.lounge .titlesub{font-size: var(--fsM); font-weight: 700;margin-bottom: 1rem; border-bottom: 1px solid #CCC;color:var(--pri02);}

.lounge .intro a{vertical-align: baseline;}
.lounge .product .item li a{padding-bottom: 0.5rem;font-weight: 500; transition: .3s;}
.lounge .product .item li a.red{color: var(--pri05);}
.lounge .product .item li a:hover{color: var(--pri01)!important;}
.lounge .product .item li a.anchor {position:absolute; transform: translateY(-100px);}

/*  問與答 qa_title */
.bodybox.qa ul {display: inline; }
.bodybox.qa h4.titleBean {display: inline-block; display: flex; justify-content: flex-start; align-items:baseline; }
.bodybox.qa h4.titleBean span{ text-align: right; font-size: var(--fsS);}
.bodybox.qa .product .title::before { content: ""; display: none; }
.bodybox.qa .product .title{ font-weight: 500; padding:2rem 0; width:100%; margin-bottom:0rem; display: inline-block; font-size:var(--fsM); text-align:left; border-bottom: solid 1px #d7d7d7; cursor: pointer;  }
.bodybox.qa .product .title:first-child{  padding: 0 0 2rem 0; }

.bodybox.qa .intro{ padding: 0 var(--fsXL); }
.bodybox.qa .product .intro { margin-bottom:0rem; border-bottom: solid 1px #d7d7d7;}
.bodybox.qa .product {margin-bottom:3rem; }
.bodybox.qa .intro a{ color:var(--pri01); }
.bodybox.qa .product dd { display:none; }
.bodybox.qa .product dd .cq01{ font-size:var(--fsP); padding:2rem 0;}
.bodybox.qa .intro a{vertical-align: baseline;}


/* --------------- 條款 /Privacy --------------- */
.rulelist { width: 100%;line-height: 1.6; text-align: left; font-size: var(--fsP); color: var(--pri02); margin-bottom: 3rem;}
.rulelist > dt { margin-bottom: 1rem ;font-size: var(--fsP); color: var(--pri02);}
.rulelist > dt.title { font-size: var(--fsL);color: var(--pri02);margin-bottom: 1rem;}
.rulelist > dd {padding-left: var(--fsP); margin-bottom: 1.5rem;font-size: var(--fsP);color: #000;font-weight: 300;}
.rulelist ul { padding-left: 1.5rem; margin-bottom: 1rem;}
.rulelist li {margin-bottom: 1rem;font-size: var(--fsP);color: #000;}
.rulelist ul.number li{ list-style-type: decimal;}


/* --------------- App --------------- */

/* 伯朗行動 /APP */
.app .information{ width: calc(100% - 215px - 80px);margin-top: 13rem;}
.app .photo{ width:215px; height:605px; margin-right:8rem; background:url(../Images/App/phone.png) no-repeat; display: inline-block;}
.app .category{ margin-bottom:5rem ;font-size:var(--fsM); line-height:2; color:var(--pri02); vertical-align: top; display: inline-block;}
.app .qrcode{padding:0;align-items: center; }
.app .qrcode .i1,
.app .qrcode .i2{ display: flex;align-items: center; margin-bottom: 8rem;}
.app .qrcode .i1 a{ width:172px; height:75px; margin-right:2rem; background:url(../Images/App/i1.png) no-repeat center; }
.app .qrcode .i2 a{ width:172px; height:75px; margin-right:2rem; background:url(../Images/App/i2.png) no-repeat center; }
.app .qrcode span{ font-size:var(--fsP);}
.app .qrcode img{ margin-right:2rem; }


/* cookie使用宣告 */
.privacycookie{ position: fixed; z-index: 999; bottom: 0; left: 0; display: block; width:100%; padding: 2.5rem; text-align: center; background-color: var(--pri01);}
.privacycookie p{ text-align: center;line-height: 1.5; display: block; width: 100%; max-width: 1280px; margin: 0 auto; color: #FFF;}
.privacycookie a{ text-decoration: underline; margin: 0 5px; margin-bottom: 0.3rem;border-radius: 30px;}
.privacycookie a.acpt_btn{ width: 90px; display: block; margin: 1.5rem auto 0; text-align: center; padding: 8px 25px; background-color: var(--pri03);color: var(--pri02); text-decoration:none; transition: .3s;}
.privacycookie a.acpt_btn:hover{ background-color: var(--pri02);color: #fff;}



/* ERROR - 錯誤頁 */
.mainContent.errorBox{display:block;position:relative;height:100vh;background-image:url(../Images/error.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;top:30%;}
.mainContent.errorBox::before {content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, 0.4); z-index: 1;}
.mainContent.errorBox .error{position:absolute;width:420px;left:50%;margin-left:-210px;text-align:center;color:#FFF;font-size:25px;top:8%; z-index: 2;}
.mainContent.errorBox .error b,
.mainContent.errorBox .error span,
.mainContent.errorBox .error a{display:block;}
.mainContent.errorBox .error .point{font-size:var(--fsXL2);position:absolute;top:120px;width:50px;left:50%;margin-left:-30px;}
.mainContent.errorBox .error b{font-size:120px;font-weight:100;color:#FFF;letter-spacing:10px;}
.mainContent.errorBox .error span{font-weight:100;letter-spacing:16px;margin-top:15px;}
.mainContent.errorBox .error a{font-weight:300;color:#FFF;border-radius:99px;border:1px #FFF solid;padding:8px 0;letter-spacing:7px;margin-top:23px;transition:.3s;}
.mainContent.errorBox .error a:hover{color:#FFF;background-color:var(--pri01);border:1px var(--pri01) solid;}

