@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import "bootstrap.min.css";
@import "all.min.css"; /*font-awesome*/
@import "default.css";
@import "content.css";

/* color */
:root{
	--tms-w-blue: #2DAFC9;
	--tms-w-blue2-100:rgb(0 145 191 / 100%);
	--tms-w-blue2-50:rgb(0 145 191 / 50%);
	--tms-w-blue-h:#005773;

	--tms-w-green:#00CDA8;
	--tms-w-green2:#00B7B7;
	
	--maxwidth:1220px;
	--padding-y:25px;

	--border: #eee;
	--border-2: #e7e7e7;
	--border-dark: #ddd;
	--bg-gray:#fbfbfb;

	--done:#3FC74E;
	--undone:#E41000;
	--bs-orange:#fd6c14;
		
	/* --textshadow-01: 0px 10px 25px rgba(0, 0, 0, 0.25); */
	--textshadow-02: 0px 5px 15px rgba(0, 0, 0, 0.1);
	--textshadow-03: rgba(136, 165, 191, 0.48) 5px 2px 16px 0px, rgba(255, 255, 255, 0.8) -5px -2px 16px 0px;
	--textshadow-03-2: rgba(136, 165, 191, 0.2) 5px 2px 16px 0px, rgba(255, 255, 255, 0.5) -5px -2px 16px 0px;
}

body, td, th, table, caption, tbody, tfoot, thead, tr, th, td, img, ul, li, ol, dl, dt, dd, span, fieldset, form, label, legend, input, textarea, select, button {
	border: none;
	outline: none;
	margin: 0px;
	padding: 0px;
	font-family: 'Noto Sans','Noto Sans TC','Roboto', Arial,'新細明體', sans-serif;
	line-height: 1.5;
	transition: all .5s;
}
h1, h2, h3, h4, h5, h6, p {
	border: none;
	outline: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
    font-weight: 600;
}
img {
	border: 0px none;
	max-width: 100%;
}
a{
	text-decoration: none;
	color: var(--tms-w-blue-h);
}
a:hover {
	color: var(--tms-w-blue);
}
button, input, select, textarea {
	vertical-align: middle;
}
input[type="text"], input[type="password"], input[type="file"]{
	padding: 0 1rem;
	min-height: 3.25rem;
	background-color: #fff;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	cursor: pointer;
}
input[type="radio"],input[type="checkbox"]{
	width: 20px;
	height: 20px;
	margin: 0 5px 0 0;
	flex: 0 0 20px;
}
input::-ms-clear, input::-ms-reveal {
	display: none;
}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}
select {
	border: 1px solid var(--border);
}

/* icon */
.icon{
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transition: all .5s;
}
.fa-user-carwash{   
	width: 14px;
	aspect-ratio: 1 / 1;
	background-image: url(../images/icon/icon-uesr-blue-h.svg);
}
[class*=btn-]:hover .fa-user-carwash,
[class*=btn-]:active .fa-user-carwash,
[class*=btn-]:focus .fa-user-carwash,
.fa-user-carwash.white{
	background-image: url(../images/icon/icon-uesr-w.svg);
}
.fa-map-carwash{   
	width: 13px;
	aspect-ratio: 7 / 9;
	background-image: url(../images/icon/icon-map-blue.svg);
}
[class*=btn-]:hover .fa-map-carwash,
[class*=btn-]:active .fa-map-carwash,
[class*=btn-]:focus .fa-map-carwash,
.fa-map-carwash.white{	
	background-image: url(../images/icon/icon-map-w.svg);
}
.fa-filter-carwash{
	width: 14px;
	aspect-ratio: 7 / 6;
	background-image: url(../images/icon/icon-filter-b.svg);
}
[class*=btn-]:hover .fa-filter-carwash,
[class*=btn-]:active .fa-filter-carwash,
[class*=btn-]:focus .fa-filter-carwash,
.fa-filter-carwash.white{
	background-image: url(../images/icon/icon-filter-w.svg);
}
.fa-gps-carwash{
	width: 18px;
	aspect-ratio: 1 / 1;
	background-image: url(../images/icon/icon-gps-blue.svg);
}
[class*=btn-]:hover .fa-gps-carwash,
[class*=btn-]:active .fa-gps-carwash,
[class*=btn-]:focus .fa-gps-carwash,
.fa-gps-carwash.white{
	background-image: url(../images/icon/icon-gps-w.svg);
}
.fa-scanning-carwash{
	width: 18px;
	aspect-ratio: 1 / 1;
	background-image: url(../images/icon/icon-scanning-w.svg);
}
[class*=btn-]:hover .fa-scanning-carwash,
[class*=btn-]:active .fa-scanning-carwash,
[class*=btn-]:focus .fa-scanning-carwash,
.fa-scanning-carwash.white{
	background-image: url(../images/icon/icon-scanning-w.svg);
}
.fa-search-carwash{
	width: 16px;
	aspect-ratio: 1 / 1;
	background-image: url(../images/icon/icon-search-w.svg);
}
[class*=btn-]:hover .fa-search-carwash,
[class*=btn-]:active .fa-search-carwash,
[class*=btn-]:focus .fa-search-carwash,
.fa-search-carwash.white{
	background-image: url(../images/icon/icon-search-w.svg);
}

/* 布局 */
body{
	position: relative;
	width: 100%;
	overflow-x: hidden;
	top: 0 !important;	
	font-size: 1rem;
	color: #222;
	background-image: url(../images/bg-2.png);
	background-color: var(--bg-gray);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
body#index{
	background-color: #fff;
	background-position: top center;
	background-image: url(../images/bg.png);
}
.wrapper{
	width: 100%;
	max-width: var(--maxwidth);
	margin: 0 auto;
}
@media (max-width: 768px) {
	body{
		background-size: cover;
	}
	body#index{
		background-color: var(--bg-gray);
	}
}
/* header */
.topBlk {
	width: 100%;
	display: flex;
	background-color: #fff;
	box-shadow: 0px 0px 20px rgba(0,0,0,.1);
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999;
	transition: all .5s;
}
#index .topBlk {
	box-shadow: 0px 0px 20px rgba(0,0,0,0);
	background-color:transparent;
}
#index .topBlk .wrapper{
	padding: 40px var(--padding-y) 20px;
}
.topBlk .wrapper,
.breadcrumbBlk .wrapper{
	display: flex;
	justify-content: space-between;
	padding: 30px var(--padding-y) 30px;
	max-width: inherit;
	width: 85%;
	transition: all .5s;
}
.topBlk.sticky,
#index .topBlk.sticky{
	box-shadow: 0px 0px 20px rgba(0,0,0,.2);
	background-color: #fff;
}
.topBlk.sticky .wrapper,
#index .topBlk.sticky .wrapper{
	padding: 20px var(--padding-y) 20px;
}

/* logo */
.topBlk .logo {
	height: 60px;
	display: flex;
	align-items: center;
	transition: all .5s;
}
.topBlk .logo a{
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	transition: all .5s;
}
.topBlk .logo img{
	height: 100%;
	width: auto;
	transition: all .5s;
}

/* header nav */
.header-nav{
	width: calc(100% - 170px);
	display: flex;
	justify-content: flex-start;
}
.member-login .login{
	display: flex;
	align-items: center;
	color: #666;
	font-size: .875rem;
	line-height: 1;
	margin: 10px 0 0;
	padding: 0 0 0 10px;
}
.member-login .login .login-btn{
	display: flex;
	margin: 0 0 0 .5rem;
	background-color: #fff;
	color: var(--done);
	box-shadow: 0px 0px 10px rgba(0,0,0,.1);
	font-size: .875rem;
	line-height: 2.1425;
	border-radius: 15px;
	padding: 0 1rem;
	transition: all .5s;
}
.member-login .login:hover .login-btn{
	text-decoration: none;
	background-color: var(--done);
	color: #fff;
}
.member-login .member{
	display: none !important;
}
.groupBlk{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 60px);
}
.groupBlk .exchange{
	display: flex;
	justify-content: center;
	align-items: center;	
	color: #fff;
	background-color: var(--tms-w-blue);
	border-radius: 30px;
	box-shadow: var(--textshadow-03-2);
	padding: 0 40px;
	height: 60px;
	transition: all .5s;
	margin: 0 15px 0 0;
	letter-spacing: 1px;
	font-size: 1.125rem;
}
.groupBlk .exchange::before{
	content: '';
	display: block;
	width: 22px;
	height: 16px;
	background: url(../images/icon/icon-tickets.svg) center no-repeat;
	background-size: 100% auto;
	margin: 0 10px 0 0;
}
.groupBlk .exchange:hover{	
	background-color: var(--tms-w-blue2-100);
	box-shadow: var(--textshadow-03);
}

/* body:has(main.member) .member-login .login{
	display: none;
} */
@media (max-width: 768px) {		
	body:has(main.member):not(#index) .login.member{
		display: flex !important;
		padding: 0;
	}
}
/* 漢堡nav */
.toggleBlk,.toggleBlk a,nav.active{
	display: block;
}
.toggleBlk {
	transition: all .5s;
}
.toggleBlk:has(.active){
	position: absolute;
	right: 0;
	top: 0px;
	z-index: 9999;
}
.toggleBlk>a{
	display: flex;
	width: 60px;
	height: 60px;
	align-items: center;
	justify-content: center;
	transition: all .5s;
	background-color: var(--tms-w-blue2-100);
	border-radius: 100%;
	box-shadow: var(--textshadow-03-2);
}
.toggleBlk:hover>a{
	background-color: var(--tms-w-blue-h);
	box-shadow: var(--textshadow-03);
}
.toggleBlk a.active {
	padding: 0 20px;
	background-color: rgb(0 0 0 / 20%);
	box-shadow: none;
	border-radius: 0%;
}
.toggleBlk>a .toggleBlk-bar{
	display: flex;
	flex-flow: column;
}
.toggleBlk>a.active .toggleBlk-bar{	
	display: block;
	margin-top: -16px;
}
.toggleBlk .icon-bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background-color: #fff;
	border-radius: 2px;
}
.toggleBlk .icon-bar+.icon-bar {
	margin-top: 4px;
}
.toggleBlk a.active .icon-bar {
	margin-top: 0;
	width: 20px;
}
.toggleBlk a.active .icon-bar:nth-child(1) {
	transform: translateY(9px) rotate(135deg);
}
.toggleBlk a.active .icon-bar:nth-child(2) {
	display: none;
}
.toggleBlk a.active .icon-bar:nth-child(3) {
	transform: translateY(6px) rotate(-135deg);
	margin-top: 1px;
}
.menu{
	display: none;
    position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,87,115,.98);
	transition: none;
}
.menu.active {
	display: flex;
    transition: all .3s ease-in-out;
}
.menuBlk{
	display: flex;
	width: 100%;
	height: 100%;
}
.navBlk {
	width: 100%;
	height: 100%;
	position: relative;
	overflow-y: auto;
	scrollbar-color: transparent;
	scrollbar-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.navBlk:hover{
	scrollbar-width: 0;
}
.navBlk::-webkit-scrollbar{
	width: 0;
}
.navBlk .nav-wrapper{
	width: 100%;
	max-width: var(--maxwidth);
	padding:10vh 0 0;
}
.navBlk .nav-wrapper ul{
	padding: 0 5%;
	display: block;
	width: 100%;
	list-style-type: none;
}
.navBlk .nav-wrapper ul{
	margin: 0 0 2.5rem;
}
.navBlk .nav-wrapper ul li{
	width: 100%;
	animation-duration: .5s;
    animation-name: fadeIn;
	opacity: 1;
	padding: 10px var(--padding-y);
}
.navBlk ul li a{
	display: block;
	color: rgba(255,255,255,.96);
	line-height: 1.5;
	font-size: 1.15rem;
	padding: .75rem 1.5rem;
	opacity: .95;
	transition: all .5s;
	border-radius: 40px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-align: center;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	letter-spacing: 1px;
}
.navBlk .nav-wrapper ul li.brand a{	
	border: 1px solid #00F1C6;
	background-color: rgba(0, 241, 198, .2);
}
.navBlk .nav-wrapper ul li.number a{
	border: 1px solid #00E7E7;
	background-color: rgba(0, 231, 231, .2);
}
.navBlk .nav-wrapper ul li.product a{	
	border: 1px solid #4AD3FF;
	background-color: rgba(74, 211, 255, .2);
}
.navBlk .nav-wrapper ul li a:hover{
	opacity: 1;
	background-color: rgb(0 0 0 / 10%);
	border: 1px solid var(--tms-w-blue-h);
}

@media (max-width: 1440px) {
	.topBlk .wrapper,
	.breadcrumbBlk .wrapper{
		max-width: var(--maxwidth);
		width: 100%;		
	}
	.header-nav{
		width: 85%;
	}
}
@media (max-width: 1280px) {

	#index .topBlk .wrapper{
		padding: 40px 5% 20px;
	}
	.topBlk .wrapper,
	.breadcrumbBlk .wrapper{
		padding: 30px 5% 30px;
	}
}
@media (max-width: 991px) {
	/* 布局 */
	body{ 
		overflow-x:hidden;
	}
	.wrapper {
		width: 100%;
		margin: 0;
	}
	/* menu nav */		
	.menuBlk{
		flex-flow: column;
		height: 100%;
		overflow-y: auto;
		scrollbar-color: transparent;
		scrollbar-width: 0;
	}
	.navBlk {
		height: auto;
		overflow-y: visible;
	}
}
@media (max-width: 768px) {
	/* header */
	#index .topBlk .wrapper,
	#index .topBlk .logo a{
       justify-content: center;
	}	
	#index .topBlk.sticky .wrapper,
	#index .topBlk.sticky .logo a{
		justify-content: flex-start;
	}
	#index .topBlk .wrapper{
		padding: 40px 0 20px;
	}
	#index .topBlk.sticky .wrapper,
	.topBlk.sticky .wrapper,
	.topBlk .wrapper{
		padding: 10px 60px 10px 15px;
	}
	#index .topBlk .logo{
		height: 60px;
	}
	.topBlk .logo,
	#index .topBlk.sticky .logo {
		height: 40px;
	}
	.header-nav {
        width: 0;
    }
	.groupBlk .member-login .login.web,
	.groupBlk .exchange.web{
		display: none;	
	}
	.groupBlk{
		width: 0;
	}
	.toggleBlk>a {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.member-login .login.member{
		font-size: 0;
		width: 60px;
		height: 60px;
		background-color: #f9f9f9;
		color: var(--tms-w-blue-h);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 60px;
		margin: 0;
	}
	#index .toggleBlk>a{
		background-color:transparent;
		box-shadow: none;
	}
	#index .toggleBlk a.active .icon-bar,
	#index .toggleBlk>a:hover .icon-bar{
		background-color: #fff;
	}
	#index .toggleBlk>a:hover,
	#index .toggleBlk>a.active,
	#index .topBlk.sticky .toggleBlk>a.active{
		background-color: var(--tms-w-blue-h);
	}
	#index .topBlk.sticky .toggleBlk>a{
		background-color: var(--tms-w-blue2-100);
	}
	#index .toggleBlk .icon-bar{
		background-color:  var(--tms-w-blue2-100);
	}
	#index .topBlk.sticky .toggleBlk .icon-bar{
		background-color: #fff;
	}
}
@media (max-width: 576px) {
	.navBlk .nav-wrapper ul li {
		padding: 7px var(--padding-y);
	}
	.navBlk .nav-wrapper ul li a{
		font-size: 1.125rem;
		padding: .75rem 1rem;
	}
}
@media (max-width: 425px) {
	.navBlk .nav-wrapper ul li a{
		padding: .75rem 1rem;
	}
}
@media (max-width: 375px) {	
	
}
@media (max-width: 320px) {	

}

/* main */
.mainBlk {
	display: block;
	min-height: 100vh;
	position: relative;
	padding: 120px 0 60px;
	transition: all .5s;
}
#index .mainBlk{
	padding: 120px 0 120px;
}
#index .mainBlk::before{
	content: '';
	display: block;
	width: calc(100% - 60px);
	border-radius: 120px 120px 0 0;
	background-color: #fff;
	position: absolute;
	top: 70px;
	left: 30px;
	height: calc(100% - 70px);
}
.mainBlk section{
	position: relative;
	overflow: hidden;
}
.mainBlk .wrapper{
	padding: 3rem 0;
	transition: all .5s;
}
@media (max-width: 1280px) {
	#index .mainBlk::before {
		width: calc(100% - 30px);
		border-radius: 60px 60px 0 0;
		left: 15px;
	}
	.mainBlk .wrapper{
		padding: 2rem 5%;
	}
}
@media (max-width: 768px) {
	#index .mainBlk::before {
		display: none;
	}
	#index .mainBlk .wrapper{
		padding: 0 ;
		display: block;
	}
	.mainBlk{
		min-height: calc(100vh - 40px);
		padding: 60px 0 0;
	}
	#index .mainBlk {
		padding: 120px 0 0;
	}	
	.mainBlk>section>.wrapper{
        min-height: calc(100vh - 7rem);
        display: flex;
        flex-flow: column;
        justify-content: space-between;
	}
	.mainBlk .wrapper:has(.titlebox){
		padding: 1rem 5% 2rem;
	}
}

/* 麵包屑 */
.breadcrumbBlk{    
	display: flex;
	background-color: var(--tms-w-blue2-100);
}
.breadcrumbBlk .wrapper{
	padding: 0 var(--padding-y);
}
.breadcrumb {
	padding: 0;
	margin-bottom: 0rem;
}
.breadcrumb-item a,.breadcrumb-item{
	color: #fff;
	font-size: .875rem;
	line-height: 40px;
}
.breadcrumb-item+.breadcrumb-item {
	padding-left: 0.25rem;
}
.breadcrumb-item+.breadcrumb-item::before {
	padding-right: 0.25rem;
	color: #fff;
	font-size: .875rem;
	line-height: 40px;
	opacity: .5;
}
@media (max-width: 1280px){	
	.breadcrumbBlk .wrapper{
		padding: 0 5%;
	}
}
@media (max-width: 768px){	
	.breadcrumbBlk {
		display: none;
	}
}

/* footer */
footer{
	position: relative;
	bottom: 0;
}
.footer {
	position: relative;
    margin: 0;
    width: 100%;
	transition: all .25s;
	background-color: #224568;
	z-index: 2;
	padding: 2rem 0;
}
.footer-info{
	width: 35%;
}
.footer-info p{
	font-size: 1rem;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 .75rem;
}
.footer-info p a img{
	opacity: .9;	
}
.footer-info p a:hover img{
	opacity: 1;	
}
.contact{
	display: flex;
	width: 65%;
}
.contact .contact-btn{
	display: flex;
	align-items: center;
	border-radius: 60px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 1rem 1.85rem;
	margin-left: 30px;
	width: 100%;
	transition: all .5s;
	max-width: 350px;
}
.contact .contact-btn:hover{
	border: 1px solid var(--tms-w-blue2-100);
	box-shadow: var(--textshadow-02);
	background-color: rgba(255, 255, 255, .025);
}
.contact .contact-btn::before{
	content: '';
	display: flex;
	width: 45px;
	height: 32px;
	align-items: center;
	border-right: 1px dotted rgba(255, 255, 255, 0.15);
	background: url(../images/icon/icon-mail-footer.svg) left center no-repeat;
	background-size: 30px auto;
}
.contact .contact-btn:last-child::before{
	background: url(../images/icon/icon-phone.svg) left center no-repeat;
	background-size: 30px auto;
}
.contact .contact-btn:hover::before{
	border-right: 1px dotted var(--tms-w-blue2-50);
}
.contact .contact-info{
	color: #fff;
	padding: 0 0 0 20px;
	opacity: .9;
	transition: all .5s;
	font-weight: 300;
}
.contact .contact-info>span{
	font-size: .95rem;
	line-height: 1;
	letter-spacing: 1px;
	transition: none;
}
.contact .contact-info>p{
	font-size: 1rem;
	line-height: 1;
	margin: 3px 0 0;
	letter-spacing: 1.5px;
	font-weight: 400;
	transition: none;
}
.contact .contact-btn:hover .contact-info{
	color: var(--tms-w-blue);
	opacity: 1;
	font-weight: 400;
}
.copyRightBlk{
	width: 100%;
	margin: 0 auto;
	background-color: var(--bg-gray);
	padding: 10px 0;
	bottom: 0;
}
.copyRightBlk .wrapper>div,
.footer .wrapper>div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 var(--padding-y);
}
.copyRightBlk .wrapper p{
	font-size: .825rem;
	line-height: 1;
	margin-bottom: 0rem;
	color: #666;
	padding: 0;
	opacity: .6;
}
.copyRightBlk .wrapper .tlife-mobile{
	display: none;
}
.copyright-link{
	display: flex;
	align-items: center;
}
.copyright-link a{
	display: block;
	padding: 0 .75rem 0 0;
	line-height: 1;
	font-size: .875rem;
	color: #fff;
	text-decoration: none;
	font-weight: 300;
	opacity: .65;
	transition: all .5s;
}
.copyright-link a:hover{
	text-decoration: underline;
	opacity: 1;
}
.copyright-link a:has(img){
	opacity: 1;
}
.copyright-link a:has(img):hover{
	opacity: .8;
}
.gotop {
	display: none;
	width: 40px;
	height: 60px;
	background-color:transparent;
	position: absolute;
	right: 3%;
	bottom: 100px;
	color: rgb(0 0 0 / 0%) !important;
	font-size: 0;
	text-align: center;
	line-height: 0;
	border-radius: 25px;
	z-index: 2;
	opacity: .8;
	transition: all .5s;
}

@media (max-width: 1280px){
	.copyRightBlk .wrapper>div,
	.footer .wrapper>div{
		padding: 0 5%;
	}	
}
@media (max-width: 1180px){
	.footer {
		padding: 1.5rem 0;
	}
	.footer-info{
		display: none;
	}
	.contact{
		display: flex;
		flex-flow: row;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	.contact .contact-btn{
		margin: 0;
		padding: .5rem 1.5rem;   
		max-width: 380px;
		justify-content: center;
		border: 0;
        border-radius: 0;
		border-right: 1px dotted rgba(255,255,255,.15);
	}
	.contact .contact-btn:first-child{
		border-left: 1px dotted rgba(255,255,255,.15);
	}
	.contact .contact-btn::before{
		height: 20px;
		width: 20px;
		border-right: 0px dotted var(--tms-w-blue2-50);
		background-size: 20px auto;
	}
	.contact .contact-btn:last-child::before{
		background-size: 20px auto;
	}
	.contact .contact-info {
		padding: 0 0 0 10px;
		display: flex;
	}
	.contact .contact-info>span {
		font-size: 1rem;
		line-height: 20px;
		padding: 0 5px 0 0;
	}	
	.copyright-link{
		display: none;
	}	
	.copyRightBlk{
		padding: 1rem 0;
	}
	.copyRightBlk .wrapper>div{
		justify-content: center;
		align-items: flex-end;
	}	
	.copyRightBlk .wrapper .tlife-mobile{
		display: block;
		padding: 0 10px 0 0;
	}
	.copyRightBlk .wrapper p{
		border-left: 1px dotted var(--border-dark);
		padding: 0 0 0 10px;
	}
}
@media (max-width: 820px){	
	.footer {
		/* display: none; */
		padding: 1rem 0;
	}
	.footer .wrapper>div{
		padding: 0;
	}		
	.contact .contact-btn{
		padding: .25rem 0;
		/* border-right: 0px dotted rgba(255,255,255,.15); */
		max-width: 280px;
	}
	.contact .contact-btn:first-child{
		/* border-left: 0px dotted rgba(255,255,255,.15); */
	}
	.contact .contact-btn::before,
	.contact .contact-btn:last-child::before{
		height: 20px;
		width: 18px;
		background-size: 16px auto;
	}
	.contact .contact-info {
        padding: 0 0 0 5px;
	}
	.contact .contact-info>span,
	.contact .contact-info>p {
       letter-spacing: .5px;
	   font-size: .875rem;
    }
	.copyRightBlk{
		background-color: rgba(255,255,255,.75);
	}		
	#index .copyRightBlk{
		border-top: 1px dotted var(--border);
	}
	.copyRightBlk .wrapper>div{
		padding: 0 1%;
	}	
	.copyRightBlk .wrapper p {
		color: #999;
	}
}
@media (max-width: 576px){	
	
	.footer {
		display: none;
		padding: .75rem 0;
	}
	/* .contact{
		flex-flow: column;
	}		
	.contact .contact-btn{
		padding: .2rem 0;
	} */
	 
}
/* 頁碼 */
.page {
    margin: 3.5rem 0 0;
}
.page ul {
    justify-content: center;
    flex-wrap: wrap;
}
.page ul li::before {
    display: none;
}
.page ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    line-height: 1;
    color: #666;
	background: transparent;
	margin: 0 .25rem;
	border-radius: 100%;
}
/* .page ul li a:has(i):hover{
	background-color: var(--tms-w-blue);
	color: #fff;
} */
.page ul li a:hover{
    background-color: var(--border);
	color:  var(--tms-w-blue);
	text-decoration: none;
	font-weight: 600;
}
.page ul li a.active,
.page ul li a.active:hover{
    background-color: var(--tms-w-blue);
	color:  #fff;
	text-decoration: none;
	font-weight: 600;
}
.page ul li a i{
	color: #999;
	opacity: .8;
}
.page ul li a i::before {
    vertical-align: middle;
}
.page-display {
    text-align: center;
    color: #666;
    font-size: .875rem;
}

@media (max-width: 991px) {
	.page ul {
		justify-content: center;
		margin: 0;
	}
	.page ul li a {
		width: 40px;
		height: 40px;
	}
}
@media (max-width: 768px) {
	.page {
		margin: 3em 0 1.5rem;
	}
}
@media (max-width: 576px) {
	.page ul li a {
		width: 30px;
		height: 30px;
	}
}
/* logo-slogan */
.logo-slogan{
	position: relative;
	text-align: center;
}
.logo-slogan>span{
	font-size: .875rem;
	line-height: 1.15;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: fit-content;
	margin: 0 auto;
	color: #666;
	letter-spacing: 1px;
}
.logo-slogan>span::before,
.logo-slogan>span::after{
	content: '';
	width: 9px;
	height: 9px;
	transform: rotate(-45deg);
	background: url(../images/icon/icon-logo-star.svg) center no-repeat;
	background-size: 100% auto;
	margin: 0 10px;
}
body:has(.topBlk.sticky) .logo-slogan{
	display: none;
}

/* title */
.titlebox{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 var(--padding-y);
	margin: 20px 0 30px;
	transition: all .5s;
}
#index .titlebox{
	justify-content: space-between;
	margin: 0 0 30px;
}
.titlebox .title{
	display: flex;
	align-items: center;
	font-size: 2.25rem;
	color: #222;
}
.titlebox .title>span{
	font-size: 1rem;
	line-height: 1;
	display: flex;
	color: var(--tms-w-green);
	align-items: center;
}
.titlebox .title>span::before{
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	transform: rotate(-45deg);
	background-image: url(../images/icon/icon-title-star.svg);
	background-repeat: no-repeat;
	background-size: 10px auto;
	background-position: 0 0;
	margin: 0 10px;
}
/* 序號兌換 */
.number .titlebox .title>span{
	color: var(--tms-w-green2);
}
.number .titlebox .title>span::before{
	background-position: 0 -10px;
}
.number .more-btn::after{
	background-color: var(--tms-w-green2);
}
/* 優惠活動 */
.product .titlebox .title>span{
	color: var(--tms-w-blue2-100);
}
.product .titlebox .title>span::before{
	background-position: 0 -20px;
}
.product .more-btn::after{
	background-color: var(--tms-w-blue2-100);
}
/* 最新消息 */
.newsrbox .titlebox .title>span{
	color: var(--tms-w-blue);
}
.newsrbox .titlebox .title>span::before{
	background-position: 0 -30px;
}
.newsrbox .more-btn::after{
	background-color: var(--tms-w-blue);
}
/* 通路 */
.shopbox .titlebox .title>span{
	color: #01B4ED;
}
.shopbox .titlebox .title>span::before{
	background-position: 0 -40px;
}
.shopbox .more-btn::after{
	background-color: #01B4ED;
}

@media (max-width: 768px) {
	.titlebox{
		padding: 0 ;
	}
	#index .titlebox{
		justify-content: center;
		margin: 0 auto 15px;
		border: 2px solid #00F1C6;
		padding: 16px 30px;
		border-radius: 50px;
		line-height: 1.2;
		width: calc(97.5% - 60px);
		max-width: 400px;
		background-color: rgba(255,255,255,.5);
	}
	#index .titlebox:hover{
		box-shadow: var(--textshadow-02);
	}
	#index .number .titlebox {
		border: 2px solid #00E7E7;
	}
	#index .product .titlebox {
		border: 2px solid #4AD3FF;
	}
	.titlebox .title {
		font-size: 1.75rem;
	}
}
@media (max-width: 425px) {
	#index .titlebox{
		padding: 16px 10px;
	}
	#index .titlebox .title {
		font-size: 1.5rem;
	}
	.titlebox{
		margin: 10px 0 20px;
	}
	.titlebox .title {
		font-size: 1.5rem;
	}
}
@media (max-width: 375px) {
	#index .titlebox{
		padding: 16px 5px;
		width: calc(97.5% - 50px);
	}
	#index .titlebox .title {
		font-size: 1.25rem;
	}
	#index .titlebox .title>span {
		font-size: .9rem;
	}
	.titlebox .title {
		font-size: 1.25rem;
	}
	.titlebox .title>span::before {
		margin: 0 5px;
	}
}

/* more button */
.more-btn{	
	font-weight: 400;
	transition: all .5s;
	position: relative;
	background-color: var(--bg-gray);
	color: #666;
	height: 60px;
	border-radius: 30px;
	display: none;
	align-items: center;
	padding: 0 60px 0 30px;
	justify-content: space-between;
}
#index .more-btn{
	display: flex;
}
.more-btn::after,
.newsBlk-list ul li::after{
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	background-color: var(--tms-w-green);
	border-radius: 100%;
	transition: all .5s;
	position: absolute;
	right: 30px;
	opacity: 1;
}
.more-btn:hover{
	background-color: var(--tms-w-blue);
	color: #fff;
}
.titlebox .more-btn:hover::after,
.newsBlk-list ul li:hover::after{
	opacity: 0;
}
.titlebox .more-btn::before,
.newsBlk-list ul li::before{
	content: '';
	display: block;
	transition: all .5s;
	width: 15px;
	height: 10px;
	background-color: transparent;
	background-image: url(../images/icon/icon-more-next-w.svg);
	background-size: 100% auto;
	background-position: center;
	position: absolute;
	right: 30px;	
	opacity: 0;
}
.titlebox .more-btn:hover::before,
.newsBlk-list ul li:hover::before{	
	animation: arrow .5s;	
	opacity: 1;
}
@media (max-width: 768px) {
	#index .more-btn{
		display: none;
	}
}

/* 左右輪播 */
.sliderbox{
	position: relative;
}
.sliderbox .owl-carousel .owl-item>li>a{
    display: flex;
    width: 100%;
    height: auto;
    padding-top: 66%;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}
.sliderbox .owl-carousel .owl-item>li>a img{
    width: auto;
    max-width: inherit;
    height: 120%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .5s;
}
.sliderbox .owl-carousel .owl-item>li p{
    padding-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 2.1rem;
    line-height: 1.2;
}
.sliderbox .owl-carousel .owl-item>li>a:hover>img{
    height: 130%;
}
.sliderbox.owl-theme .owl-nav [class*=owl-]{
    font-size: 0rem;
    color: rgba(255,255,255,0);
    width: 60px;
    height: 60px;   
	background-size: 11px auto;
	background-position: right 22px center;
	opacity: 1;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);	
}
.sliderbox.owl-theme .owl-nav .owl-next{
	right: -10px;
	background-image: url(../images/icon/icon-next-w.svg);
	background-color: rgba(45,175,201,.85);
}
.sliderbox.owl-theme .owl-nav .owl-prev {
    left: -10px;
	background-image: url(../images/icon/icon-next-blue.svg);
	background-color: rgba(255,255,255,.85);
	transform: rotate(180deg);
}
.sliderbox.owl-theme .owl-nav [class*=owl-]:hover{
    color: rgba(255,255,255,0);
    text-decoration: none;
	background-color: rgba(45,175,201,1);
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
    background-image: url(../images/icon/icon-next-w.svg);
}
.sliderbox.owl-theme .owl-nav .owl-next:hover{
	right: -11px;
}
.sliderbox.owl-theme .owl-nav .owl-prev:hover{
    left: -11px;
}
.sliderbox.owl-theme .owl-nav .disabled{
	opacity: .3;
	background-image: url(../images/icon/icon-next-gray.svg);
}
@media (max-width: 1024px) {
	.sliderbox .owl-theme .owl-nav{
		height: 50px;
	}
	.sliderbox.owl-theme .owl-nav [class*=owl-] {
		width: 50px;
		height: 50px;        
		background-position: right 18px center;
        background-size: 10px auto;
	}	
}
/* member */
.memberBlk{
	display: flex;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 1rem 0;
}

/* index banner */
.index-banner{
    width: 100%;
}
.index-swiper{
	background-size: 0;
	padding: 30px 20px;
	width: 90%;
	margin: 0 auto;
	position: relative;	
}
.index-swiper .index-detail{
	width: 100%;
	position: static;
}
.index-swiper .owl-carousel .owl-stage-outer{
	overflow: inherit;
	margin: 0 auto;
}
.index-swiper .index-detail .owl-item{
	border-radius: 30px;
	overflow: hidden;
	transform: scale(.975);
	transition: all .5s;
}
.index-swiper .index-detail .owl-item.active:first-child,
.index-swiper .index-detail .owl-item.active.center{
	opacity: 1;
	box-shadow: var(--textshadow-03);
}
.index-swiper .index-detail .owl-item::after{
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: #fff;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	opacity: 0;
	transition: all .5s;
	pointer-events: none;
	display: none;
}
.index-swiper .index-detail .owl-item .cardimg {
	width: 100%;
    overflow: hidden;
    position: relative;
	transition: all .5s;
	aspect-ratio: 48 / 13;
}
.index-swiper .index-detail .owl-item img{
	width: 100%;
    max-width: inherit;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .5s;
}
.index-swiper .index-detail .banner-title{
	padding: 12px;	
	display: none;
	background: #fff;
}
.index-swiper .index-detail .banner-title>p{
	font-size: .875rem;
	line-height: 1rem;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	color: #222;
	margin: 0;
}
.index-swiper .owl-nav {
	z-index: 2;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.index-swiper .owl-theme .owl-nav .owl-prev{
	left: 10px;
}
.index-swiper .owl-theme .owl-nav .owl-next{
	right: 10px;
}
.index-swiper .owl-theme .owl-nav .owl-prev:hover{
	left: 0px;
}
.index-swiper .owl-theme .owl-nav .owl-next:hover{
	right: 0px;
}
.index-swiper .owl-dots{
	position: absolute;
    justify-content: flex-start;
    width: auto;
    margin: 0;
	left: 50%;
    bottom: 0;
    transform: translate( 0%, -50%);
}
.index-swiper .owl-dot.active,
.index-swiper .owl-dot:hover{
	width: 20px;
	background-color: var(--tms-w-blue2-100);
}
.index-swiper .owl-dot{
	width: 10px;
	background-color: var(--tms-w-blue2-50);
}
@media (max-width: 1024px) {
	.index-swiper {
		width: 95%;
	}
	.index-swiper .owl-theme .owl-nav .owl-prev{
		left: 5px;
	}
	.index-swiper .owl-theme .owl-nav .owl-next{
		right: 5px;
	}
	.index-swiper .index-detail .owl-item{
		transform: scale(.985);
	}
}
@media (max-width: 768px) {
	.index-banner{
		margin: 0 0 20px;
	}
	.index-swiper .index-detail .owl-item{
		border-radius: 10px;
		transform: scale(.975);
	}
	.index-swiper .index-detail .owl-item .cardimg{
		box-shadow: none;
		border-radius: 10px 10px 0 0;
		aspect-ratio: 48 / 13.5;
	}
	.index-swiper .index-detail .banner-title{
		display: block;
	}
	.index-swiper .index-detail .owl-item img {
		width: auto;
		height: 100%;
	}
	.index-swiper .owl-theme .owl-nav .owl-prev{
		left: 0px;
	}
	.index-swiper .owl-theme .owl-nav .owl-next{
		right: 0px;
	}
}@media (max-width: 640px) {
	.index-swiper .index-detail .owl-item .cardimg {
		aspect-ratio: 27 / 11;
	}
}
@media (max-width: 576px) {
	.index-swiper {
		width: 95%;
		padding: 20px;
	}
	.index-swiper .index-detail .owl-item.active.center{
		opacity: 1;
	}
	.index-swiper .index-detail .owl-item.active.center::after{
		opacity: 0;
	}
	.index-swiper .index-detail .owl-item{
		opacity: .5;
	}
	.index-swiper .index-detail .owl-item::after{
		opacity: .8;
		display: block;
	}
}
@media (max-width: 425px) {
	.index-swiper {
		padding: 15px;
	}
}
/* brand */
.brand-tab-nav{
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}
.brand-tab-nav .brand-nav-item{
	width: 25%;
	margin: 0 -20px 0 0;
}
.brand-tab-nav .brand-nav-link{
	border-radius: 40px 40px 0 0;
	width: 100%;
	padding: 20px 20px 55px;
	text-align: center;
	color: #888;
	font-size: 1.125rem;
	line-height: 1;
	background-color: #f6f6f6;
	position: relative;
	transition: all .5s;
}
.brand-tab-nav .brand-nav-item:nth-child(even) .brand-nav-link{
	background-color: var(--border);
}
.brand-tab-nav .brand-nav-item .brand-nav-link.active,
.brand-tab-nav .brand-nav-item .brand-nav-link:hover{
	background-color: var(--tms-w-blue);
	color: #fff;
	box-shadow: var(--textshadow-02);
}
.brand-tab-nav .brand-nav-item:nth-child(1) .brand-nav-link{
	z-index: 5;
}
.brand-tab-nav .brand-nav-item:nth-child(2) .brand-nav-link{
	z-index: 4;
}
.brand-tab-nav .brand-nav-item:nth-child(3) .brand-nav-link{
	z-index: 3;
}
.brand-tab-nav .brand-nav-item:nth-child(4) .brand-nav-link{
	z-index: 2;
}
.brand-tab-nav .brand-nav-item:nth-child(5) .brand-nav-link{
	z-index: 1;
}
.brand-tab .tab-content{
	border-radius: 40px;
	border: 1px solid var(--border);
	margin: -40px 0 0;
	background-color: #fff;
	position: relative;
	padding: 3rem;
	z-index: 10;
	transition: all .5s;
}
.brand-tab .tab-content .brand-list{
	display: flex;
	flex-wrap: wrap;
}
.brand-tab .tab-content .brand-list li{
	width: 25%;
	padding: 10px 40px;
	list-style-type: none;
	transition: all .5s;
}
.brand-tab .tab-content .brand-list li .brand-img{
	position: relative;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	overflow: hidden;
	border-radius: 10px;
    box-shadow: none;
    aspect-ratio: 2 / 1;
}
.brand-tab .tab-content .brand-list li .brand-img::after{
	content: '';
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	transition: all .5s;
	display: block;
	background-color: rgba(255,255,255,.4);
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all .5s;
}
.brand-tab .tab-content .brand-list li .brand-img:hover::after{
	opacity: 1;
}

@media (max-width: 1280px) {
	.brand-tab .tab-content {
		padding: 2rem 1.5rem;
		border-radius: 30px;
		margin: -30px 0 0;
	}
	.brand-tab .tab-content .brand-list li{
		padding: 10px 20px;
	}
}
@media (max-width: 991px) {
	.brand-tab .tab-content {
		padding: 2rem .5rem;
	}
	.brand-tab-nav .brand-nav-link {
		border-radius: 30px 30px 0 0;
		padding: 20px 15px 45px;
	}
}

/* 優惠活動 */
.product-content{
	border-radius: 40px;
	border: 1px solid var(--border);
	padding: 3rem 10px;
}
.product-content .owl-theme .owl-nav .owl-next{
	right: -30px;
}
.product-content .owl-theme .owl-nav .owl-next:hover{
	right: -40px;
}
.product-content .owl-theme .owl-nav .owl-prev{
    left: -30px;
}
.product-content .owl-theme .owl-nav .owl-prev:hover {
    left: -40px;
}
.product-content .product-group{
	padding: 0 25px;
	display: flex;
	width: 100%;
}
.productbox .cardbox{
	padding: 0 0 0 30px;
}
.productbox .cardimg {
    border-radius: 10px;
    box-shadow: none;
	aspect-ratio: 1 / 1;
	width: 55%;
}
.productbox .cardtext{
	padding: 0 30px 0 10px;
	width: 100%;
	border-right: 1px dotted var(--border);
	margin: 0;
	transition: all .5s;
}
.product-group .cardbox:last-child .cardtext{
	border-right: 0px dotted var(--border);
}
.productbox .cardtext>.title{
	font-size: 1.125rem;
	line-height: 1.25;
	-webkit-line-clamp: 2;
	margin: 0 0 .5rem;
}
.productbox .card-info:hover .cardtext>.title{
	color:  var(--tms-w-blue-h);
}
.productbox .cardtext .sale{
	background-color: var(--tms-w-blue);
	color: #fff;
	padding: 2px .5rem;
	font-size: .875rem;
	display: flex;
	align-items: center;
	width: fit-content;
	line-height: 1;
	margin: 0 0 .5rem;
}
.productbox .cardtext .fare {
	align-items: baseline;
	font-weight: 700; 
	color: var(--bs-orange);
	font-size: 1rem;
	line-height: 1.25;
}
@media (max-width: 1024px){	
	.product-content{
		padding: 2rem 10px;
	}
	.productbox .cardbox{
		padding: 0 0 0 15px;
	}
	.productbox .cardtext{
		padding: 0 15px 0 10px;
	}
	.productbox .cardtext>.title {
		font-size: 1rem;
		line-height: 1.25;
		margin: 0 0 5px;
	}
}
@media (max-width: 991px){	
	.product-content {
		border-radius: 30px;
	}
	.productbox .cardbox {
		padding: 0 0 0 10px;
	}
	.productbox .cardtext {
		padding: 0 5px 0 10px;
	}
	.productbox .cardtext .sale {
		margin: 0 0 5px;
	}
	
}
@media (max-width: 768px){	
	.product-content {
		border: 1px dotted var(--border);
		border-width: 1px 0;
		padding: 30px 0;
		margin: 40px auto 0;
		border-radius: 0;
		background-color: rgba(255, 255, 255, 0.5);
	}
	.product-content .product-group{
		flex-flow: column;  
		width: calc(97.5% - 60px);
		max-width: 400px;
		margin: 0 auto;
		padding: 0;
	}
	.productbox .cardbox {
        padding: 10px 5px;
    }
	.productbox .cardtext{
		border: 0;
		padding: 0 0 0 10px;
	}
}
@media (max-width: 576px){	
	.productbox .cardimg {
		max-width: 110px;
	}
}
/* newsrbox */
.newsBlk-list{
	width: 100%;
}
.newsBlk-list ul{
	list-style-type: none;		
	display: flex;
	flex-flow: column;
	width: 100%;
	margin: 0 auto;
}
.newsBlk-list ul li{
	border-bottom: 1px solid var(--border);
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 30px;
}
.newsBlk-list ul li:first-child{
	border-top: 1px solid var(--border);
}
.newsBlk-list ul li:hover{
	background-color: #fff;
}
.newsBlk-list ul li::after{
	background-color: var(--border-dark);
	
}
.newsBlk-list ul li::before{
	background-image: url(../images/icon/icon-more-next-blue.svg);
	
}
#index .newsBlk-list ul li::before,
#index .newsBlk-list ul li::after{
	right: 55px;
}
.newsBlk-list .listbox{	
	color: #444;
	width: 90%;
	padding: 25px 0;
}
.newsBlk-list .listbox p{
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.newsBlk-list .listbox:hover p{	
    color: var(--tms-w-blue-h);
}
.newsBlk-list .listbox .day{
    color: var(--tms-w-blue-h);
	line-height: 1;
	font-size: 1rem;
	margin: 0 0 10px;
	display: block;
}
@media (max-width: 1200px) {
	.newsBlk-list .listbox{		
		padding: 20px 0;
	}
}
@media (max-width: 991px) {
	.newsBlk-list .listbox{		
		padding: 15px 0;
	}
	.newsBlk-list ul li {
		padding: 0 30px 0 0;
	}
}
@media (max-width: 768px) {	
	.newsBlk-list ul li{
		padding: 0;
	}
	.newsBlk-list ul li::after{		
        right: 20px;
	}
	.newsBlk-list ul li::before{
		display: none;
	}
	.newsBlk-list .listbox .day {
		margin: 5px 0;
	}
	.newsBlk-list .listbox p {
		-webkit-line-clamp: 2;
		font-size: 1rem;
	}
	.newsBlk-list .listbox .day {
		font-size: .95rem;
	}
}
@media (max-width: 425px) {	
	.newsBlk-list ul li::after{		
       display: none;
	}
	.newsBlk-list .listbox {
		width: 100%;
		padding: 10px 0;
	}
	.newsBlk-list .listbox p {
        text-align: justify;
    }
	.newsBlk-list .listbox .day {
        margin: 5px 0;
    }
}

/* 首頁手機板按鈕 */
.button-box{
	margin: 0 0 ;
	padding: 50px 0 30px;
}
.mainBlk>section.button-box>.wrapper{
	min-height: inherit;
}
.button-box .btn{
	width: calc(97.5% - 60px);
	max-width: 400px;
	margin: 0 auto 15px;
}

/* 合作通路 */
#index .shopbox .wrapper{
	padding: 3rem 0 0;
}
.shopbox .product-content{
	padding: 3rem 55px;
}
.productbox.shopbox .cardbox{
	padding: 0 10px;
}
.productbox.shopbox .cardtext {
    padding: 0 0 0 10px;
    border-right: 0px dotted var(--border-dark);
}
.productbox.shopbox .cardimg {
	width: 70%;
	border: 1px solid var(--border);
}
.cardtext .tag{
	width: fit-content;
	padding: 0 .5rem;
	background-color: var(--tms-w-blue);
	color: #fff;
	font-size: .85rem;
	line-height: 1.5;
	border-radius: 20px;
	letter-spacing: .5px;
}
.cardtext .tag.v1{
	background-color: var(--tms-w-green);
}
.productbox.shopbox .product-content .owl-theme .owl-nav .owl-next{
	right: -80px;
}
.productbox.shopbox .product-content .owl-theme .owl-nav .owl-next:hover{
	right: -90px;
}
.productbox.shopbox .product-content .owl-theme .owl-nav .owl-prev{
    left: -80px;
}
.productbox.shopbox .product-content .owl-theme .owl-nav .owl-prev:hover{
    left: -90px;
}
@media (max-width: 1280px) {
	#index .shopbox .wrapper{
		padding: 3rem 5% 0;
	}
}
@media (max-width: 991px) {
	.shopbox .product-content{
		padding: 2.5rem 50px;
	}
	.productbox.shopbox .product-content .owl-theme .owl-nav .owl-next{
		right: -70px;
	}
	.productbox.shopbox .product-content .owl-theme .owl-nav .owl-prev {
		left: -70px;
	}
}

/* 內頁 */
.content{
	padding: 30px 0 ; 
}
.formBlk ~ .content{ 
	max-width: 640px;
    margin: 0 auto;
	padding: 0;
}
.content .userBlk{
	width: 85%;
	margin: 0 auto;
}
.content .titleBlk{
	text-align: center;
	padding: 20px 0;
	font-size: 1.25rem;
	line-height: 1;
	font-weight: 600;
}
.modalBlk.content{
	padding: 0;
}
.modalBlk.content .titleBlk{
	font-size: 1.75rem;
	padding: 10px 0;
}
@media (max-width: 768px) {	
	.formBlk ~ .content .titleBlk{ 
		padding: 10px 0 20px;
	}
	.modalBlk.content .titleBlk{
		font-size: 1.5rem;
		padding: 15px 0;
	}
}
@media (max-width: 576px) {	
	.formBlk ~ .content .userBlk ul{
		padding-left: 1rem;
	}
}
/* 最新消息內頁 */
.newsBlk-detail .titlebox {
    padding: 0 10px;
    margin: 20px 0 30px;
}
.titlebox>h1{
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 1.5;
}
.newsBlk-detail{
	border-bottom: 1px dotted var(--border-dark);
	padding: 0;
	width: 85%;
	margin: 0 auto;
}
.detail-top{
	border-top: 1px dotted var(--border-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25px 10px;
	transition: all .5s;
}
.newsBlk-detail .userBlk {
    background: transparent;
	padding: 0 10px 2rem;
    transition: all .5s;
}
.newsBlk-detail .userBlk img{
	border-radius: 10px;
	overflow: hidden;
}
.detail-share .mata{
	display: flex;
}
.detail-share .mata>a {
    width: 40px;
    height: 40px;
    margin: 0 0 0 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	background-color: var(--tms-w-blue);
	transition: all .5s;
}
.detail-share .mata>a>img {
    transform: scale(1.15);
}
.detail-share .mata>a:hover {
    opacity: .5;
}
@media (max-width: 991px) {
	.newsBlk-detail{
		width: 90%;
	}
	.newsBlk-detail .titlebox {
		padding: 0;
	}
	.titlebox>h1{
		font-size: 2rem;
		line-height: 1.25;
	}
	.detail-top{
		padding: 20px 0;
	}
	.newsBlk-detail .userBlk {
		padding: 0 0 2rem;
	}
}
@media (max-width: 768px) {
	.newsBlk-detail{
		width: 100%;
	}	
	.titlebox>h1{
		font-size: 1.75rem;
	}	
	.newsBlk-detail .titlebox {
		margin: 10px 0 30px;
	}	
}
@media (max-width: 425px) {
	.newsBlk-detail .titlebox>h1{
		font-size: 1.5rem;
	}
	.newsBlk-detail .titlebox {
		margin: 10px 0 20px;
	}	
}

/* AD */
/* body:has(.adimghide){
	overflow: hidden;
} */
.adimgBlk{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-color: rgb(0, 0, 0,.65);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1099;
}
.adimgBlk .adimg{
	position: fixed;
	top: 0;            
	bottom: 0;
	margin: auto; 
	width: 100%;
	height: auto;
	overflow-y: auto;
}
.adimgBlk .adimg::-webkit-scrollbar{
	display: none;
}
.adimgBlk .adimg .modalBlk{
	max-width: 640px;
	padding: 5vh 25px;
}
.adimgBlk .adimg .iframeBlk.formBlk.imgBlk{
	padding: 0;
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}
.adimgBlk  .modalBlk .btn-close{
	z-index: 2;
	right: 10px;
    top: calc(5vh - 15px);
}
.adimgBlk .adimg .iframeBlk>*{
	border: 0;
	border-radius: 0;
	width: 100%;
	max-width: inherit;
}
.adimgBlk .adimg .cardimg{
	border-radius: 0;
	aspect-ratio: 3 / 1;
}
@media (max-width: 425px) {
	.adimgBlk .adimg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.adimgBlk .adimg .modalBlk{
		top: inherit;
	}
}
/* 動畫 */
@keyframes jump {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-20px)
    }
}

@keyframes fadeInMenu {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}
@keyframes fadeInMenu2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(8rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeInSobunTabs {
    0% {
        opacity: 0;
        transform: translateY(3rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn-down {
    0% {
        opacity: 0;
        transform: translateY(-8rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes arrow {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    40% {
        opacity: 0
    }

    49.9% {
        opacity: 0;
        transform: translateX(50%)
    }

    50% {
        opacity: 0;
        transform: translateX(-50%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes arrow-external {
    0% {
        opacity: 1;
        transform: translate(0) rotate(-45deg)
    }

    40% {
        opacity: 0
    }

    49.9% {
        opacity: 0;
        transform: translate(15%,-15%) rotate(-45deg)
    }

    50% {
        opacity: 0;
        transform: translate(-15%,15%) rotate(-45deg)
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(-45deg)
    }
}

@keyframes arrow-return {
    0% {
        opacity: 1;
        transform: translate(0) rotate(180deg)
    }

    40% {
        opacity: 0
    }

    49.9% {
        opacity: 0;
        transform: translateX(-50%) rotate(180deg)
    }

    50% {
        opacity: 0;
        transform: translateX(50%) rotate(180deg)
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(180deg)
    }
}

.web{
	display: block;
}
.mobile{
	display: none;
}
@media (max-width: 768px) {
	.web{
		display: none;
	}
	.mobile{
		display: block;
	}
}

/*通路據點-地圖 .ExpandMaps*/
@media(max-width: 768px){
	.ExpandMaps {
		width: 325px !important;
	}
}