@charset "utf-8";
body {
	display: flex;
	flex-direction: column;
	-webkit-overflow-scrolling: touch;
	word-break: break-word;
	font-family: 'Oswald', 'Noto Sans TC', sans-serif;
	position: relative;	
	
	&::before{
		content: "";
		background: linear-gradient(0deg, rgba(37,37,37,1) 0%, rgba(50,50,50,1) 20%);
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0px;
		top: 0px;
		z-index: -1;
	}
}
body, .cs{
	font-size: 18px;
	line-height: 1.4;
	color: #ffffff;
	font-weight: normal;
}
body.lock{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
body *:not(.fa),
body *:not(.fa):after,
body *:not(.fa):before{	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
i, a, h1, h2, .cs{
	padding: 0;
	margin: 0;
	list-style: none;
	border-style: none;
	font-style: normal;
	border: 0px;
}
html,
body{
	min-width:100%;
}
html,
body,
.w100,
.w100-only-child *:not(.no-w100),
.layout-full,
.article,
.block-title,
.layout-pn{
	float: left;
	width: 100%;
}
.h100{
	height: 100%;
}
a{
	text-decoration: none;
	color: inherit;
}
.lh-1{
	line-height:1;
}
.ulbox,
.ulbox-subs ul{
	list-style:none;
	padding:0; 
	margin:0;
}
.flexbox,
.flex-and-child,
.flex-and-child *:not(.no-flex),
.flex-only-child *:not(.no-flex),
.layout-pn,
.layout-pn .pagination,
.layout-pn .pagination .num,
.layout-pn .pagination .button,
.layout-full,
.nav-switch{
	display: flex;
	align-items: center;	
	justify-content: center;
	flex-wrap: wrap;
}
.flex-col{
	display: flex;
	flex-direction: column;
}
.flexbox.column{flex-direction: column;}
.flexbox.sbet{
	justify-content: space-between;
}
.flexbox.jcs{
	justify-content: flex-start;
}
.flexbox.jce,
.flex-col.jce{justify-content: flex-end;}
.flexbox.vttop{
	align-items:flex-start;
	align-content:flex-start;
}
.flexbox.vtend{
	align-items:flex-end;
	align-content:flex-end;
}
.flexbox.fs{
	align-items:flex-start;
	align-content:flex-start;
	justify-content: flex-start;
}
.flexfill{
	flex:1;
	min-width: 1px;
}
a, a:after, a:before,
.trans, .trans:after, .trans:before,
.button-hb hr, .button-hb:before, .button-hb:after{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.trans.no, .trans.no:after, .trans.no:before{
	transition: none;
}
.scrollin,
.scrollin-top,
.scrollin-op,
.scrollin-l,
.scrollin-r,
.scrollin-fixed,
.zoom-out{
	visibility: hidden;
}
body.nav-on{
	overflow: hidden;
}

:root{
	--maxLayout: 1500;
	--maxInner: 1400;
	--topH: 100px;
	--paddingLR: clamp(25px,  (50 / var(--maxLayout) * 100VW), 50px);
	--paddingT: clamp(70px,  (220 / var(--maxLayout) * 100VW), 220px);
	--paddingB: clamp(80px,  (150 / var(--maxLayout) * 100VW), 150px);
	
	.fa{
		font-size: 24px;
		margin-left: 1px;
	}
	
	--bg1: linear-gradient(0deg, rgba(37, 37, 37, 1) 0%, rgba(50, 50, 50, 1) 40%);
	
	input:focus {
		outline: none;
	}
}
.layout-full {
	min-width: calc(var(--maxLayout) * 1px);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.layout-center {
	width: calc(var(--maxLayout) * 1px);
}
.pd-lr-1{
	padding-right: var(--paddingLR);
	padding-left: var(--paddingLR);
}
.pd-t-1{
	padding-top: var(--paddingT);
}
.pd-b-1{
	padding-bottom: var(--paddingB);
}

.article{
        line-height: 1.8;
}
.article ul,
.article ol {
        padding: 0;
}
.article ul {
        list-style-type: disc;
}
.article li {
        margin-left: 25px;
}
.article a {
        text-decoration: underline;
        color: #0071b3;
}
.article a:hover {
      text-decoration: underline;
      color: #0051a3;
    }
.article h3{
        font-size: 26px;
        font-weight: 700;
        color: #f08c56;
        margin:20px 0px 0px;
}

.hide-ex{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sr-only,
.visually-hidden {	
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
select {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-attachment: scroll;
	background-image: url(/images/select-switch.png);
	background-repeat: no-repeat;
	background-size: 15px auto;
	background-position: right 15px center;
	text-align: left;
}
select::-ms-expand{ 
	display: none; 
}
.layout-full.middle {
	flex: 1 0 auto;
	flex-direction: column;
}

.gap-box{
	--lr-space: 30px;
	--tb-space: 60px;
	gap: var(--tb-space) var(--lr-space);
	--colN: 4;
	--col1: 1 / var(--colN) * 100%;
	--colF: var(--lr-space) * (var(--colN) - 1) / var(--colN);
}
.gap-box > *{width: calc(var(--col1) - var(--colF));}

.grid-container {
	display: grid;
	align-items: stretch;
}

.display-none{ 
	display: none; 
}
.no-max100{
	max-width: none!important;
}

.font1{font-family: var(--font1);}
.bg1{background: var(--bg1);}

.layout-full.top{
	position: sticky;
	left: 0px;
	top: 0px;
	z-index: 5;
	height: var(--topH);
	padding-right: 100px;
	padding-left: 100px;
}
.layout-full.top:before{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: -2;
	background-color: #323232;
}

.layout-full.top nav{
	margin-right: 40px;
	margin-left: auto;
}
.layout-full.top .nav{
	column-gap: 40px;	
}
.layout-full.top .nav > li{position: relative;}
.layout-full.top .nav > li > a{
	height: var(--topH);
}
.layout-full.top .nav > li:hover ~ li > a,/*懸停按鈕之後的所有按鈕*/
.layout-full.top .nav > li:has(~ li:hover) > a,/*懸停按鈕之前的所有按鈕*/
.layout-full.top .nav .ulbox li:hover ~ li > a,/*懸停按鈕之後的所有按鈕*/
.layout-full.top .nav .ulbox li:has(~ li:hover) > a/*懸停按鈕之前的所有按鈕*/
{
	color: #8b8b8b;
}
.layout-full.top .nav .ulbox{
	max-width: none;
	width: 280px;
	position: absolute;
	top: 100%;
	right: 50%;
	transform: translateX(50%);
	display: none;
	padding: 35px;
	background-color: #1b1b1b;
	row-gap: 30px;
	margin-top: -13px;
}
.layout-full.top .nav .ulbox a:hover{
}
.search-box{
	background-color: #1b1b1b;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 6;
	padding: 38px 100px;
	opacity: 0;
	visibility: hidden;	
	transform: translateY(-100%);
	
	&.show{
		opacity: 1;
		visibility: visible;	
		transform: translateY(0);
	}
}
.search-box-close{
	margin: 0 0 0 auto;
}
.search-box .inner {
	width: 800px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ffffff;
	padding-bottom: 18px;
	column-gap: 10px;
	margin-top: auto;
	margin-bottom: auto;
}
.search-box .inner input{
	background-color: transparent;
	font-size: 20px;
}
.layout-full.copyright {
	background-color: #1b1b1b;
}
.layout-full.copyright::before{
	content: "";
	height: 1px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #2b2b2b;
}
.layout-full.copyright .inner{
	opacity: 0.4;
	min-height: 65px;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 16px;
	text-align: center;		
}
.layout-full.bottom {
	background-color: #1b1b1b;
	padding-top: 80px;
	padding-bottom: 80px;
}
.layout-center.bottom{
	align-items: stretch;
	align-content: stretch;
	color: #8b8b8b;
}
.layout-center.bottom .box.w1 {
	width: calc(316 / var(--maxInner) * 100%);
}
.layout-center.bottom .space{
	background-color: #2b2b2b;
	width: 1px;
	margin-right: calc(80 / var(--maxInner) * 100%);
	margin-left: calc(80 / var(--maxInner) * 100%);
}
.layout-center.bottom .intro {
	line-height: 1.8;
	row-gap: 25px;
}
.layout-center.bottom .products{line-height :1.6;}
.layout-center.bottom .products a:hover{
	color: #FFF;
}
.layout-center.bottom .tag {
	font-size: 20px;
	font-weight: 600;
	color: #FFF;
	margin-bottom: 25px;
}
.layout-center.bottom .ulbox{
	row-gap: 10px;
	line-height: 1.6;
}


.layout-full.banner{
	height: 500px;
	padding-right: 100px;
	padding-left: 100px;
}
.layout-full.banner .inner{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-left: 50px;
}
.layout-full.banner .inner .text {
	 font-size: min(max(15vw, 65px), 210px);
	font-style: italic;
	transform: skew(-1deg);
	margin-bottom: -50px;
	font-weight: 600;
}
.layout-center.w1920 {
	width: 1920px;
	padding-right: 100px;
	padding-left: 100px;
}




.common-button{
	height: 56px;
	width: 280px;
	border: 1px solid #413c3c;
	font-size: 20px;
}
.common-button:hover{
	color: #FFF;
	background-color: #413c3c;
}

.breadcrumb{
	color: #808080;
	margin-top: 35px;
	text-align: center;
}
.breadcrumb li:not(:last-child):after{
	content: "／";
	margin-right: 20px;
	margin-left: 20px;
	display: inline-block;
}

.sidebar-box{
	position: fixed;
	z-index: 4;
	right: 15px;
	bottom: 15px;
	gap: 10px;
}
.back-top{
	transform: translateY(-10px);
	opacity: 0;
	visibility: hidden;
}
.back-top.show{
	transform: translateY(0);opacity: 1;visibility: visible;
}

.nav-switch{
	display: none;
	z-index: 3;
	margin-left: 20px;
}
.button-hb{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: flex-end;
	width: 26px;
	height: 22px;
	color: #ffffff;
}
.button-hb hr,
.button-hb:before,
.button-hb:after  {
	border: none;
	display: block;
	height: 2px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	color: inherit;
	background-color: currentcolor;
}
.button-hb hr {
}
.button-hb:before,
.button-hb:after  {
	content: '';
}
html > body.nav-on .button-hb{}
html > body.nav-on .button-hb:before {
	width:80%;
}  
html > body.nav-on .button-hb hr {	
	width:60%;
}
html > body.nav-on .button-hb:after {	
}

.layout-pn {
	margin-top: clamp(70px,  (100 / var(--maxLayout) * 100VW), 100px);	
	column-gap: 20px;
}
.layout-pn .pagination{
	gap: 10px;	
}
.layout-pn .pagination .button {
	line-height: 1;
	width: 30px;
	height: 40px;
	border: none;
	border-radius: 0;
	position: relative;
	
	&:not(.arrow)::after{
		content:"";
		position: absolute;
		width: 100%;
		height: 1px;
		left: 0px;
		bottom: 0px;
	}
	&:hover,
	&.selected{
		color: #f08c56;
		
		&:not(.arrow)::after {
		  background-color: #f08c56;
		}
	}
}
.layout-pn .pagination .button.arrow{			
	.fa{
		font-size: 25px;
	}
}

.rwd-table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

/*編輯器左右捲軸表格*/
@keyframes swipe {
  0% {
    right: 0px;
  }
  50% {
    right: 20px;
  }/
  100% {
    right: 0px;
  }
}
.for-sroll-table {
	overflow-x: auto;
	display: flex;
	table-layout: fixed;
	position: relative;
}
.for-sroll-table.swipe:after{
	content: "";
	height: 15px;
	width: 80px;
	position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(/plugins/swipe.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	animation: swipe 2s infinite;
}
.for-sroll-table *{
	max-width: none;
}
.for-sroll-table > table {
	width: 100%;
	table-layout: fixed;
}

.W-1920px{}
@media screen and (max-width: 1920px) {
.layout-full.banner{
}	
}

.W-1500px{}
@media screen and (max-width: 1500px) {
.layout-full{
	min-width: inherit;
}

.layout-full.top,
.search-box,
.layout-center.w1920{
	padding-left:var(--paddingLR);
	padding-right:var(--paddingLR);
}
.layout-full.banner{
	padding-right:var(--paddingLR);
	padding-left:var(--paddingLR);
}
.layout-full.banner .inner{
	padding-left:var(--paddingLR);
}
}

.W-1080px{}
@media screen and (max-width: 1080px) {
.rwd-table > th{
	display: none;
}
.rwd-table > tbody > tr{
	display: flex;
	flex-direction: column;
}
.rwd-table.rtlb > tbody > tr{
	flex-direction: column-reverse;
}

.nav-switch{
	display: flex;
}
.layout-full.top nav{
	background: #323232;
	position: fixed;
	height: calc(100VH - var(--topH));
	width: 100%;
	top: var(--topH);
	right: 0;
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;	
	overflow:auto;
	overflow-x: hidden;
	padding: 0 var(--paddingLR) 60px;
	align-items: flex-start;
	align-content: flex-start;
	
	margin-right: 0;
	z-index: -1;
	
	ul, li, a{
		width: 100%;
	}
	.nav{
		flex-direction: column;
		justify-content: flex-start;
		
		>li{
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #494949;
		}
		>li>a{
			height: 76px;			
			justify-content: space-between;
		}
		> li.switch > a:after{
			content: "\f107";
			font-family: FontAwesome;
			font-size: 24px;
			margin-right: 20px;
		}
		> li.switch.active > a:after{transform: rotateX(180deg);}
		.ulbox{
			position: static;
			transform: translateX(0);
			max-width: 100%;
			width: 100%;
			row-gap: 20px;
			background: transparent;
			padding: 0;
			margin-top: 0;
			margin-bottom: 30px;
		}	
	}
}
body.nav-on{
	.layout-full.top{
		nav{
			transform: translateY(0);
			opacity: 1;
			visibility: visible;			
		}
	}
}
.layout-full.bottom {
	padding-top: 80px;
	padding-bottom: 70px;

}
.layout-center.bottom .box,
.layout-center.bottom .box.w1 {
	width: 100%;
}
.layout-center.bottom .space{
	width: 100%;
	height: 1px;
	margin: 50px 0;
}
.layout-center.bottom .logo{
	margin-right: auto;
	margin-left: auto;
}
.layout-full.banner{
	height: 400px;	
}	
.layout-full.banner .inner .text {
	margin-bottom: -25px;
}
}

.W-800px{}
@media screen and (max-width: 800px) {
:root{
	--topH: 80px;
}
.layout-full.banner{
	height: 350px;	
}
.layout-full.bottom {
        padding-top: 70px;
        padding-bottom: 60px;
}
.layout-full.top .logo{
	width: 250px;
}
}

.W-480px{}
@media screen and (max-width: 480px) {
:root{
	--topH: 65px;
}
.layout-full.top .logo{
	width: 200px;
}
.button-hb{
	width: 22px;
	height: 18px;
}
.layout-full.banner{
	height: 300px;	
}
.sidebar-box{
	width: 35px;
}
}