:root {
	--s-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
	--s-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
	--s-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
	--s-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
	--s-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
	--s-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem);
	--s-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
	--s-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem);
	--s-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem);
  
	--f--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
	--f--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
	--f-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
	--f-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
	--f-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
	--f-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
	--f-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
	--f-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
	--f-7: clamp(4.03rem, 3.36rem + 3.36vw, 5.96rem);

	--c-base:#1F1F1F;
	--c-contrast:#FFFFFF;
	--c-base-alt:#333333;
	--c-contrast-alt:#A4A4A4;
	--c-meta:#A4A4A4;
	--c-outline:#5D5D5D;
	--c-primary:#F3B617;
  }

  body {
	font-family: "Lato","PingFang TC","Heiti TC","微軟正黑體","sans-serif";
	font-weight: 500;
	color: var(--c-contrast);
	letter-spacing: 0.02em;
  }

  h1,h2,h3,h4,h5,h6{
	font-weight: 500;
	line-height: 1.4;
  }

  h1{
	font-size: var(--f-5);
  }
  h2{
	font-size: var(--f-4);
  }
  h3{
	font-size: var(--f-3);
  }
  h4{
	font-size: var(--f-2);
  }
  h5{
	font-size: var(--f-1);
  }
  h6{
	font-size: var(--f-0);
  }

  p {
	font-size: var(--f-0);
	line-height: 1.5;
	letter-spacing: 2px;
  }

  .text-nowrap{
	text-wrap: nowrap;
  }

/* blog style */
.blog-post {
	line-height: 1.5;
}

.blog-post a{
	color:var(--wp--preset--color--primary);
	transition: .3s;
}

.blog-post a:hover{
	opacity: .8;
}

.blog-post ul{
	list-style-type: disc;
	padding-left:var(--s-xl);
}

.blog-post ol{
	padding-left:var(--s-xl);
}


.blog-post li {
	font-size: var(--f-0);
    margin-bottom: var(--s-2xs);
	line-height: 2.25;
}

/* swiper style */

.swiper [class^="swiper-button-"]::after{
    font-size: 30px;
	color:var(--c-contrast);
}

.swiper-slide {
	height: 100%;
}
.swiper-wrapper .swiper-slide:not(.swiper-slide-active) {
	opacity: 0.5;
}

.swiper-slide .slide-thumbnail::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(0deg, rgb(0 0 0 / 50%), transparent);
	border-radius:var(--s-s) ;
  }
  

.swiper-slide.swiper-slide-active {
	
 }

.swiper-pagination-bullet{
	width: var(--s-xs);
	height: var(--s-xs);
	margin-right: var(--s-2xs) !important;
	margin-left: var(--s-2xs) !important;
	opacity: .5;
	background: none;
	border: 1px solid white;
}

.swiper-pagination-bullet-active {
	background:white;
}

/* pageination */

.nav-links{
	display: flex;
	gap:var(--s-xs)
}

.page-numbers:not(.next, .prev){
	display:inline-flex;
	width:3em;
	height:3em;
	align-items: center;
	justify-content: center;
	transition: .3s;
	background-color: var(--c-base-alt);
	border-radius: 999px;
}

.page-numbers:not(.current):hover{
	color:var(--c-primary);
}

.current{
	background-color: var(--c-contrast) !important;
	border-radius: 999px;
	color:var(--c-base);
}

.prev,
.next{
	width:fit-content;
	border:1px solid var(--c-contrast);
	color:var(--c-contrast);
	padding: var(--s-2xs) var(--s-xs);
	border-radius: 999px;
	transition:.3s;
}

.prev:hover,
.next:hover {
	background:var(--c-contrast);
	color:var(--c-base) !important;
}

/* FF Form */
.fluentform .ff-el-form-control{
	border:1px solid var(--c-outline) !important;
}

.fluentform .ff-el-input--label{
	margin-bottom: var(--s-xs) !important;
}