/* ------------------- mediaqueries ------------------- */
@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
	/* 活動資訊 /news default */
    .news .txt-banner{flex-direction: column-reverse; align-items: center; padding-bottom: 5rem; margin-bottom: 5rem;}
	.news .txt-banner ul {padding: 0; width: 100%;}
	.news .txt-banner .photo {margin-bottom: 4rem;}

	/* 伯朗公告 /news placard */
	.newslink .item {padding: 3rem;}

	/* 二代卡記名 /count index */
	.count .dataBox {padding: 0rem 1rem 1rem 1rem;}
	lightbox .lightbox-window .dataBox { padding: 0rem 1rem 1rem 1rem;}
	
	/* 飲品輕食 & 商品區 & 卡藝廊 */
	.product .pic,
	.loungedetail .product .pic {width: 100%; margin-right: 0;background-size: contain;margin-bottom: 2rem;}
	
	.product li.category,
	.product li.title,
	.product li.eng,
	.product li.titleS, 
	.product li.intro,
	.countdetail .product li.intro,
	.countdetail .product li.intro2,
	.loungedetail .product .category,
	.loungedetail .product .title, 
	.loungedetail .product li.intro,
	.loungedetail .product li.intro2{ width: 100%; margin-bottom: 2rem;}

	.product .item,
	.loungedetail .product .item {margin-bottom: 0rem;}

	/* Lounge卡餘額點數轉置 transpose lightbox */
	lightbox .lightbox-window .formtable.c4 li:nth-child(1){width:auto;min-width: 115px;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(2){width:auto; min-width: 100px;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(3){width:20%;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(4){width:20%;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(5){width:15%;}
}

@media screen and (max-height: 1000px) {
	/* NoteBook height */
}

@media screen and (max-height: 620px) {
	/* NoteBook height */
}
@media screen and (max-width: 800px) {
	br.w800{display: none;}

	/* 手機版選單 */
	html, body{ font-size: 13px;} /* 1rem */
	.pc{ display: none!important;}
	.mobile{ display: inline-block;}

	.screenlock{ right: 20px;}
	.screenlock.on a.UI.share{ background-color: var(--pri02); color: #FFF;}
	.screenlock.on a.UI.share::before{ transform: rotate(180deg);}
	.screenlock.on a.social{ margin: 0 3px 10px; pointer-events: auto; opacity: 1;}

	header .top{ position: relative; z-index: 100; top: 0;}
	header .logo{ height: 70px;}
	header a:hover{ color: var(--pri02)!important;}
	header a.mobilemenu{ display: inline-block; top: 50%; transform: translateY(-50%);}
	header nav{ position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; padding-top: calc(70px + 3rem); background-color: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 99; transition: .5s;}
	.MobileMenuOn header nav{ left:0;}
	header .container{ padding: 0 4rem;}
	header nav .container,
	header nav dl{display: inline-block; width: 100%; padding: 0 3.5rem;}
	/* header nav dd{display: inline-block; width: 100%;} */
	/* header nav dd{position: static; transform: none; background-color: transparent; border-top: none!important; border-left: 1px solid var(--pri01); border-radius: 0!important; text-align: left;} */
	header nav dl{ padding: .5rem 0; }
	header nav dt{ border-bottom: .5px solid #CCC; padding-bottom: 1rem; }
	header nav dt a{ position: relative;}
	header nav dt a::before,
	header nav dt a::after{ position: absolute; top: 50%; transform: translateY(-50%);}
	header nav dt a::before{content: "";display: inline-block!important; left: .5rem;}
	header nav dt a::after{content: 'keyboard_arrow_down'; right: .5rem; transition: .3s;}
	header nav dt.on a::after{ transform: rotate(180deg) translateY(50%);}
	header nav dt a span{ width: 100%; text-align: left; padding-top: 0; padding-left: 4rem;}
	header nav dt a span.en{ font-weight: 600;}

	header nav dl:hover dd{display: block;}
	/* header nav dt.on+dd{display: block;} */
	header nav dd{ display: block; position: relative; top: 0; left: 0; width: 100%; border-radius: 0; transform: none; background-color: transparent; padding: .5rem 0 .5rem 4rem; border-bottom: .5px solid #CCC;}
	header nav dd a{ text-align: left; padding: .5rem 0;}
	header nav dd a.title{ width: 100%;}
	header nav dd a.sub {width: 50%; color: #4E4E4E; font-weight: 500; font-size: var(--fsS);}
	header nav dd a.sub::before{ content: "・";}
	header nav dd a.sub b.en{font-weight: 500;}
	.index header nav dd{ border-radius: 0; border-top: none;}
	

	header nav dd a.sub:nth-of-type(4),
	header nav dd a.sub:nth-of-type(8) { padding-bottom:0.5rem; margin-bottom:0rem; border-bottom: 0px solid #CCC;}
	header nav dd a.sub:nth-of-type(4),
	header nav dd a.sub:nth-of-type(8) { margin-bottom: 1.2rem;display: block;}


	/* 左選單 共用 */
	.leftMenu dt { padding: 20px 10px; font-size:var(--fsM);}
	.leftMenu dt a {  font-size:var(--fsM);}
	.leftMenu dd {border-radius: 30px;}
	.leftMenu dd a { padding: 15px 0; font-size:var(--fsP);}
	.leftMenu dt.on::before { width:20.44px;  height: 17px; }
	.leftMenu dd a.submenu { border-radius: 25px 25px 0 0;}
	.leftMenu .submenuList{ border-radius: 0 0 25px 25px;}
	.leftMenu .submenuList a { padding: 15px 3rem;}

	.leftMenu .UI.tune::before { font-size: var(--fsM); line-height: 1;}
	.leftMenu .searchBox input {padding: 20px; }
	.leftMenu .searchBox input::placeholder{ font-size: var(--fsM);}

	.leftMenu dt.on::before {left: 195px; }
    .leftMenu .UI.tune::before { left: 195px;}

	.leftMenu dd a.submenu { padding-bottom: 15px; }
	

	/* footer */
	footer .link { display: flex; justify-content: space-between; align-items: center; flex-direction: column;}

	/* 企業沿革 */
	.product .category{font-size:28px; }

	.about .product .intro b {margin-left: -29px;}

	/* 首頁 /default */ /* 活動資訊 /news default */
	.index h3.titleBean {padding: 4rem 0;}

	.index .news-list a.item.hot{ width: 100%; margin:0 0 5rem 0; display: inline-flex;flex-direction: column; background-color: var(--pri03);}
	.index .news-list a.item.hot:nth-of-type(even){flex-direction:column;}
	.index .news-list a.item.hot b.photo,
	.index .news-list a.item.hot ul.txt{vertical-align: middle; width: 100%;}
	.index .news-list a.item.hot ul.txt{ padding: 2rem 0; display: inline-flex; align-items: center; flex-direction: column; justify-content: center;}
	.index .news-list a.item b.photo {margin-bottom: 1rem;}

	.index .common-list a.item,
	.news .common-list a.item {width: calc((100% - 2rem) / 2);margin-bottom: 2rem;}
	
	.index .common-list a.item:nth-of-type(even),
	.news .common-list a.item:nth-of-type(even){margin-right: 0rem}

	.index .common-list a.item:nth-of-type(odd),
	.news .common-list a.item:nth-of-type(odd){margin-right: 2rem;}

	.news .common-list a.item b.photo {margin-bottom: 1rem;}
	.news .txt-banner .photo {width: 100%;}

	/* leftmenu 共用 */
	.leftMenu {width: 100%;padding-right:0; margin-bottom: 3rem;}
	.information,
	.product,
	.products-list,
	.stores .information {width: 100%;}

	/* 特定頁面展開左側 leftMenu 設定 */
	/* .leftMenu dl dt dd a{ display: none;} */
	.leftMenu dt.on+dd {display: block!important;}
	.member .leftMenu dl.menu_member dt+dd,
	.count .leftMenu dl.menu_lounge dt+dd,
	.lounge .leftMenu dl.menu_lounge dt+dd{display: none;}
	
	/* 卡藝廊 /lounge */
	.loungedetail .product{width: 100%;}

	/* 線上購物 /shopping */
	.shopping .products-list{ display: flex;flex-direction: column;}
	.shopping b.photo {width: 100%;	padding-top: 50%;margin-bottom: 5rem;}
	.shopping .products-list .right {text-align: center;width: 100%;}

	/* 會員專區 /member */
	.count .information {margin-bottom: 5rem;}

	.btnbox a {width: 150px;}

	.tablebox> ul > li:nth-of-type(1) {width: 135px;}

	/* 會員密碼修改 /memberPwd */
	.tablebox.password ul li:nth-of-type(1) {width: 19%;}

	/* 會員資料修改 /memberModify */
	/* 年月日 */
	.formtable .inputtxt1 {width: 40%;}
	.formtable .inputtxt2 {width: 23%;}
	/* 格子 */
	.formtable input[type=checkbox]+Label {width: 49%}
	.formtable input[type=checkbox]+Label {display: inline-flex; align-items: center;}
	.member .tablebox span {text-align: left;}
	/* 檢查/刪除 */
	.formtable .inputtxtcheck {width: 40%;}

	lightbox .lightbox-window.member a.btn {width: 200px;}
		
	/* 二代卡交易明細查詢 inquiry */
	.formtable.c2 li:nth-child(1){ width:15%; background-size: 150%;}
	.formtable.c2 li:nth-child(2){ width:auto;}
	.formtable.c2 li:nth-child(3){ width:15%;}
	.formtable.c2 li:nth-child(4){ width:22%;}
	.formtable.c2 li:nth-child(5){ width:15%;}
	.formtable.c2 li:nth-child(6){ width:20%;}

	.formtable.c2a li:nth-child(1){ width:auto; min-width: 115px;}
	.formtable.c2a li:nth-child(2){ width:3%;}
	.formtable.c2a .tablebox li:nth-child(3){ width:15%;}
	.formtable.c2a li:nth-child(4){ width:12%;}
	.formtable.c2a li:nth-child(5){ width:15%;}
	.formtable.c2a li:nth-child(6){ width:12%;}
 
	/* 餘額點數轉置 count transpose */
    .count .formtable .inputtxt1 { width: 50%;}
	.count .tablebox ul li:nth-of-type(1) {	width: 27%;}
	.count .tablebox ul li:nth-of-type(3) { width: auto; min-width: 80px;}

	/* Lounge卡餘額點數轉置 transpose lightbox */
	lightbox .lightbox-window .formtable.c4 li:nth-child(1){width:auto;min-width: 85px;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(2){width:auto; min-width: 80px;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(3){width:30%;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(4){width:26%;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(5){width:26%;}
	lightbox .lightbox-window .formtable.c4 li:nth-child(6){width:20%;}

	
	/* 二代卡申請掛失 count lose */
	.formtable.c3 .tablebox ul li:nth-of-type(1) { width: auto; text-align: left;}
	.formtable.c3 .tablebox ul li:nth-of-type(3) { width: auto; min-width: 133px;}
	.formtable.c3 li:nth-child(1){ width:auto; }
	.formtable.c3 li:nth-child(2){ width:auto; min-width: 115px; background-size: 150%;}
	.formtable.c3 li:nth-child(3){ width:19%;}
	.formtable.c3 li:nth-child(4){ width:20%;}
	.formtable.c3 li:nth-child(5){ width:20%;}
	.formtable.c3 li:nth-child(6){ width:13%;}

	/* 伯朗行動 /APP */
	.app .information{ width:100%;margin-top: 5rem;}
	.app .photo {display: block; margin: 2rem auto; background-position: center;}

	/* 門市資訊 /store */
	.leftMenu .searchBox .UI.search{font-size: var(--fsL); right: 30px;}

}


@media screen and (max-width: 640px) {
	br.w640 { display: inline; }

	/* 活動資訊 /news default */
	.news .txt-banner{ padding-bottom: 3rem; margin-bottom: 3rem;}

	/* 飲品輕食 Drink & Food & 商品區 /products */
	.products-list .item { width: calc((100% - 2rem - 2rem)/2);}
	.products-list .item:nth-of-type(1n) { margin-right: 2rem; }	
	.products-list .item:nth-of-type(2n) { margin-right: 0; }	
	.mainNaviBar {padding:2rem 0 3rem 0; }

	/* 伯朗公告 /news placard */
	.newspic img {padding: 0 2rem 3rem;width:100%;}
	.newslink .item {padding: 1rem;}
	.pager{text-align: center;}	
	.back{ text-align: center; padding-top: 6rem;}

	/* 門市資訊 /store */
	.search .txt-banner{display: flex;flex-direction: column;}
	.search .txt-banner .photo{width:100%;margin-bottom: 3rem;}
	.search .txt-banner ul{width:100%;padding: 0 2rem;}	

	/* 會員專區 /member */
	/* .tablebox> ul > li:nth-of-type(2) {width: 100%;} */
	/* 年月日 */
	.formtable .inputtxt2 {width: 35%;}
	.formtable .inputtxt2:nth-of-type(3n) {margin-top: 1rem;}
	/* 下拉選擇 */
	.formtable select{width: 48%;}

	/* 二代卡交易明細查詢 inquiry */
	/* .formtable.c2 li:nth-child(1){ width:15%; background-size: 150%;}
	.formtable.c2 li:nth-child(2){ width:auto;}
	.formtable.c2 li:nth-child(3){ width:15%;}
	.formtable.c2 li:nth-child(4){ width:22%;} */
	.formtable.c2 li:nth-child(5){ width:20%;}
	/* .formtable.c2 li:nth-child(6){ width:20%;} */

	.formtable.c2a li:nth-child(1){ width:auto; min-width: 115px;}
	.formtable.c2a li:nth-child(2){ width:auto; min-width: 100px;}
	.formtable.c2a .tablebox li:nth-child(3){ width:21%;}
	.formtable.c2a li:nth-child(4){ width:20%;}
	.formtable.c2a li:nth-child(5){ width:16%;}
	.formtable.c2a li:nth-child(6){ width:16%;}

	/* 二代卡申請掛失 /count lose */
	.formtable.c3 li:nth-child(1){ width:auto;}
	.formtable.c3 li:nth-child(2){ width:auto; background-size: 120%;}
	.formtable.c3 li:nth-child(3){ width:20%;}
	.formtable.c3 li:nth-child(4){ width:15%;}
	.formtable.c3 li:nth-child(5){ width:15%;}
	.formtable.c3 li:nth-child(6){ width:15%;}

	/* 餘額點數轉置 count transpose */
    .count .formtable .inputtxt1 { width: 70%;}
	.tablebox.password ul li:nth-of-type(1) {width: 25%;}

	/* cookie使用宣告 */
	.privacycookie a.acpt_btn{ width: 130px;}


}